집 > 기사 > 웹 프론트엔드 > html5 게시판 구현을 위한 코드 예제 공유

html5 게시판 구현을 위한 코드 예제 공유

黄舟원래의: 2017-03-28 16:08:4919132검색

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:&#39;.&#39;;}
        .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 게시판 구현을 위한 코드 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 기본 템플릿의 코드 공유 예시다음 기사：HTML5 기본 템플릿의 코드 공유 예시