初学者必看| web前端留言板的简单制作
头部文件,
也就是大家常用的bootstrap和jquery,这里只是多加了font-awesome.min.css
这个图标的css,估计大家应该也用过,去掉对于功能实现没什么影响。
new_file.js是我自己创建的js文件。
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js" ></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js" ></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/new_file.js" ></script>
我们来看一下整个html结构部分
<div class="container">
<div class="row">
<div class="liuyan">
<div id="user">
<span id="user-fa"><i class="fa fa-user"></i></span>
<span href="#" id="usename">ZengXiaoYa</span>
</div>
<div id="usermessage">
<div class="edit">
<a href=""><i class="fa fa-camera"></i></a>
<a href=""><i class="fa fa-pencil"></i></a>
<a href=""><i class="fa fa-map"></i></a>
<a href=""><i class="fa fa-paste"></i></a>
</div>
<div class="content">
<input id="message" class="text-success" type="text">
</input>
<button id="btn" class="btn btn-success" onclick="sendMess()">发表</button>
</div>
</div>
</div>
<div id="information">
</div>
</div>
</div>
这是整体的一个结构
这里也附上整体的css文件美化一下:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.liuyan{
margin-top: 50px;
height: 500px;
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
box-shadow: 5px 5px 10px #EEEEEE;
padding: 50px;
}
.information{
margin-top: 50px;
height: 500px;
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
box-shadow: 5px 5px 10px #EEEEEE;
padding: 50px;
}
.navbar-default{
background-color: ghostwhite;
}
#nav>li>a{
color: white;
}
#user-fa{
display: inline-block;
width: 36px;
height: 36px;
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
box-shadow: 1px 1px 5px ;
border-radius: 18px;
text-align: center;
}
#user-fa>i{
font-size: 20px;
margin-top: 5px;
}
#user>a{
padding-top: 5px;
text-decoration: none;
}
.edit{
padding: 10px;
margin-top: 20px;
border-bottom: 1px solid #C7254E;
}
.edit>a{
color: #000000;
margin: 2px;
}
.edit>a:hover{
color:#999999;
background-color: #D9EDF7;
}
#message{
width: 100%;
height: 100px;
}
.btn-success{
float: right;
}
.div{
margin-top: 25px;
margin-bottom: 25px;
width: 100%;
background-color: #EEEEEE;
border: 1px solid #EBEBEB;
border-radius: 25px;
box-shadow: 1px 1px 8px #333333;
color: #000000;
height: auto;
padding: 50px;
}
.h4{
width: auto;
font-size: 25px;
}
.mess{
border: 1px solid #E4B9B9;
padding: 15px;
box-shadow: 2px 2px 15px #EEEEEE;
font-family: "微软雅黑";
font-size: medium;
}
</style>
这里也没有什么难点,大家图方便可以直接复制过去对着结构看一下
整体的效果图如下:
接下来我们看一下new_file.js里的内容
function sendMess(){
var infor=$('#information');//获取要显示留言部分的div
var username=$('#usename').html();//获取留言者的名字
var message=document.getElementById("message").value;//获得留言的内容
var showTime=document.createElement('h4');//创建显示时间的节点
var con= document.createElement('div');//创建一个div
con.setAttribute('class', 'div');//给div加上我们写好class
var showName=document.createElement('h4')//创建显示留言名字的节点
showName.setAttribute('class', 'h4');/加上样式
var mess=document.createElement('p');//创建显示留言内容的节点
mess.setAttribute('class', 'mess');//加上样式
var mydate=new Date(); //新建一个时间对象
var time=(mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDay()+' '+mydate.getHours()+':'+mydate.getMinutes()+':'+mydate.getSeconds());//时间格式化
showName.innerHTML=('留言人:'+username);//把获取的名字显示为我们创建的h4标签的内容
mess.innerHTML=('留言内容:'+'<br/>'+message);//把获取的内容显示为我们创建的p标签的内容
showTime.innerHTML=time;//显示时间
con.appendChild(showName);//把我们创建的节点加上子节点
con.appendChild(mess);
con.appendChild(showTime);
infor.append(con);
}
效果图如下:
这样的留言版呢是html静态的,大家思考一下有后台交互的留言如何去写呢 ?
下次给大家分享一个有后台交互的留言版!
点击查看更多内容
38人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦