html5 本地存储留言板

axl234

浏览: 260658 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
css

<!DOCTYPE HTML>
<html>
     <head>
         <meta charset="utf-8">
         <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--JS API-新的选择器 | HTML5–本地存储Web Storage

2013-06-25 15:16
浏览 806
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论