首页手记初学者必看| web前端留言板的简单制作

初学者必看| web前端留言板的简单制作

标签：

Html/CSS JQuery JavaScript

头部文件，
也就是大家常用的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);

 }

效果图如下：