web前端必学功法之一：留言板

案例效果：

css部分
<style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: 10px;background-color: gray;}.mes-board li{padding: 0.7em;list-style: none;}.mes-board li + li {border-top: 1px dashed #ffffff;}.mes-board h4{display: inline;margin-right: 10px;font-weight: 400px;color: #000000;}.mes-board small{color: #999999;float: right;}.mes-board div{padding: 0.4em 0;text-align: justify;font-size: 12px;margin-top: 10px;}
</style>html部分：
<div class="container"><!--发送留言--><div class="form-group"><label for="userName">用户姓名：</label><input type="text" class="form-control" id="userName"></div><div class="form-group"><label for="userName">留言内容：</label><textarea class="form-control" rows="3" id="content"></textarea><button class="btn btn-default" id="sendBtn">提交</button>&nbsp;&nbsp;&nbsp;<span id="msg" style="color: red;"></span><!--留言列表--><div id="msgBoard" class="mes-board"><li><h4>admin</h4><small>2021-04-22  15:34:45</small><div>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOOPPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE</div></li><li><h4>admin</h4><small>2021-04-22  15:34:45</small><div>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOOPPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE</div></li></div></div>
</div>

<!--留言板实现思路：1.获取用户姓名与留言内容2.判断值是否为空，如果为空，则提示信息3.绑定提交按钮的点击事件4.获取姓名，留言内容以及当前系统时间，拼接成指定的html标签5.将标签追加到留言表中
--><script>// 发送留言$("#sendBtn").click(function(){//获取用户姓名var  userName = $("#userName").val();//判断非空if(userName == null || userName.trim() == ""){$("#msg").html("用户姓名不能为空！");return;}//获取留言内容var  content= $("#content").val();//判断非空if(content.trim() == ""){$("#msg").html("请输入留言内容！");return;}  //留言数据var  msg = "<li><h4>"+userName+"</h4><small>"+formatDate()+"</small>";msg +="<div>"+content+"</div></li>";//将留言内容追加到留言板中$("#msgBoard").prepend(msg);//清空内容与提示信息$("#userName").val("");$("#content").val("");$("msg").val("");});//格式化时间function formatDate(){//获取系统当前时间var  date = new  Date();//获取年月日时分秒var str = date.getFullYear()+"-"+(parseInt(date.getMonth())+1)+"-"+date.getDate();str +" "+ date.getHours +":"+ date.getMinutes()+":"+date.getSeconds();return  str;}</script>

web前端必学功法之一：留言板相关推荐

web前端必学功法之一：用户选择爱好
web前端必学功法之一:用户选择爱好案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
web前端必学功法之一：轮播图
web前端必学功法之一:轮播图效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
web前端必学功法之一：省市联动
web前端必学功法之一:省市联动案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
web前端必学功法之一：秒表实现
web前端必学功法之一:秒表实现功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
web前端必学功法之一：五星好评
web前端必学功法之一:五星好评案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
web前端学习--仿QQ空间留言板功能
主要技术要点: css:利用position属性和margin属性实现基本布局. jq/js:留言板功能使用prepend实现最新的留言在顶部显示. 其中易出错的地方已经在源代码中有注释了,欢迎大家批 ...
Web前端好不好学？Web前端要学些什么呢？
你也许会觉得Web前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入其中时,一定会发现好像Web前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额.确实,做We ...

web前端必学功法之一：留言板

web前端必学功法之一：留言板

web前端必学功法之一：留言板相关推荐

最新文章

热门文章