html5 게시판 구현을 위한 코드 예제 공유-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Mar 28, 2017 pm 04:08 PM

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 id="HTML-JS-nbsp-API-本地存储-nbsp-Web留言板">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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。