欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html5实现留言板的代码实例分享

程序员文章站 2022-03-20 21:45:44
...
html5实现留言板的代码实例分享
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>HTML5--JS API-本地存储 Web留言板</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}
        h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:#0051a1;}
        #content #post,#comment p{zoom:1;}
        #content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
        .transition{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; 
        -o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
        #content{margin:0 auto; width:960px; overflow:hidden;}
        #content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;}
        #content #post textarea{display:block; margin-bottom:10px; padding:5px; width:948px; height:390px; 
        border:1px #d1d1d1 solid; border-radius:5px; resize:none; outline:none;}
        #content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}
        #content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}
        #comment{overflow:hidden;}
        #comment p{margin-bottom:10px; padding:10px; border-radius:5px;}
        #comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
        #comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
        #comment p span{display:inline; float:left;}
        #comment p .msg{width:738px;}
        #comment p .datetime{width:200px; color:#999; text-align:right;}
        </style>
        <script type="text/javascript">
        var Storage =
        {
            saveData:function()//保存数据
            {
                var data = document.querySelector("#post textarea");
                if(data.value != "")
                {
                    var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法,作用是返回 1970年01月01日至今的毫秒数
                    localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中,可以降低Key值重复率
                    data.value = "";
                    this.writeData();
                }
                else
                {
                    alert("请填写您的留言!");
                }
            },
            writeData:function()//输出数据
            {
                var dataHtml = "", data = "";
                for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
                {
                    data = localStorage.getItem(localStorage.key(i)).split("|");
                    dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
                }
                document.getElementById("comment").innerHTML = dataHtml;
            },
            clearData:function()//清空数据
            {
                if(localStorage.length > 0)
                {
                    if(window.confirm("清空后不可恢复,是否确认清空?"))
                    {
                        localStorage.clear();
                        this.writeData();
                    }
                }
                else
                {
                    alert("没有需要清空的数据!");
                }
            },
            getDateTime:function()//获取日期时间,例如 2012-03-08 12:58:58
            {
                var isZero = function(num)//私有方法,自动补零
                {
                    if(num < 10)
                    {
                        num = "0" + num;
                    }
                    return num;
                }
                
                var d = new Date();
    return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " 
    " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
            }            
        }
        
        window.onload = function()
        {
            Storage.writeData();//当打开页面的时候,先将localStorage中的数据输出一边,如果没有数据,则输出空
            document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件,作用是将localStorage中的数据输出
            document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
        }
        </script>
    </head>
    
    <body>
        <h1>HTML5--JS API-本地存储 Web留言板</h1>
        <div id="content">
            <div id="post">
                <textarea class="transition"></textarea>
                <input id="postBt" type="button" value="发表评论"/>
                <input id="clearBt" type="button" value="清空所有已保存的数据"/>
            </div>
            <div id="comment"></div>
        </div>
    </body>
</html>

以上就是html5实现留言板的代码实例分享的详细内容,更多请关注其它相关文章!

相关标签: html5,留言板