導讀跟大家講解下有關html5實現留言板的代碼實例分享，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說html5實現留言板的代碼實例
跟大家講解下有關html5實現留言板的代碼實例分享，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說html5實現留言板的代碼實例分享，小編也收集到了有關html5實現留言板的代碼實例分享的相關資料，希望大家看到了會喜歡。
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實現留言板的代碼實例分享的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網
免責聲明：本文由用戶上傳，如有侵權請聯系刪除！