html5--留言板案例

本文由 文史画梅 于 2014-12-24 0:00 发布在  HTML5功能    

1 <!DOCTYPE HTML>
  2 <html>
  3     <head>
  4         <meta charset="gb2312">
  5         <title>HTML5--JS API-本地存储 Web留言板</title>
  6         <style type="text/css">
  7         *{margin:0; padding:0;}
  8         body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}
  9         h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:#0051a1;}
 10         #content #post,#comment p{zoom:1;}
 11         #content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
 12         .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;}
 13         #content{margin:0 auto; width:960px; overflow:hidden;}
 14         #content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;}
 15         #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;}
 16         #content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}
 17         #content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}
 18         #comment{overflow:hidden;}
 19         #comment p{margin-bottom:10px; padding:10px; border-radius:5px;}
 20         #comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
 21         #comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
 22         #comment p span{display:inline; float:left;}
 23         #comment p .msg{width:738px;}
 24         #comment p .datetime{width:200px; color:#999; text-align:right;}
 25         </style>
 26         <script type="text/javascript">
 27         var Storage =
 28         {
 29             saveData:function()//保存数据
 30             {
 31                 var data = document.querySelector("#post textarea");
 32                 if(data.value != "")
 33                 {
 34                     var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法,作用是返回 1970年01月01日至今的毫秒数
 35                     localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中,可以降低Key值重复率
 36                     data.value = "";
 37                     this.writeData();
 38                 }
 39                 else
 40                 {
 41                     alert("请填写您的留言!");
 42                 }
 43             },
 44             writeData:function()//输出数据
 45             {
 46                 var dataHtml = "", data = "";
 47                 for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
 48                 {
 49                     data = localStorage.getItem(localStorage.key(i)).split("|");
 50                     dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
 51                 }
 52                 document.getElementById("comment").innerHTML = dataHtml;
 53             },
 54             clearData:function()//清空数据
 55             {
 56                 if(localStorage.length > 0)
 57                 {
 58                     if(window.confirm("清空后不可恢复,是否确认清空?"))
 59                     {
 60                         localStorage.clear();
 61                         this.writeData();
 62                     }
 63                 }
 64                 else
 65                 {
 66                     alert("没有需要清空的数据!");
 67                 }
 68             },
 69             getDateTime:function()//获取日期时间,例如 2012-03-08 12:58:58
 70             {
 71                 var isZero = function(num)//私有方法,自动补零
 72                 {
 73                     if(num < 10)
 74                     {
 75                         num = "0" + num;
 76                     }
 77                     return num;
 78                 }
 79                 
 80                 var d = new Date();
 81                 return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
 82             }            
 83         }
 84         
 85         window.onload = function()
 86         {
 87             Storage.writeData();//当打开页面的时候,先将localStorage中的数据输出一边,如果没有数据,则输出空
 88             document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件,作用是将localStorage中的数据输出
 89             document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
 90         }
 91         </script>
 92     </head>
 93     
 94     <body>
 95         <h1>HTML5--JS API-本地存储 Web留言板</h1>
 96         <div id="content">
 97             <div id="post">
 98                 <textarea class="transition"></textarea>
 99                 <input id="postBt" type="button" value="发表评论"/>
100                 <input id="clearBt" type="button" value="清空所有已保存的数据"/>
101             </div>
102             <div id="comment"></div>
103         </div>
104     </body>
105 </html>

标签: HTML5资讯 HTML5特效功能代码 HTML教程 html5资料 html5文章 html5中文 html5入门 html5学习

分享本文至:

评论:

Michaelagoff    2017-04-17 09:15
Then again  a nude Jay Cutler looked out over the sea and wondered what it all means  1? Harrison: Ranking the 50 No  <a href=http://www.authenticdetroitlions.biz/darius-slay-jersey-c-12.html><b>Darius Slay Jersey</b></a>  watched as his team gobbled up one of the best deep threats in football  
<a href=http://www.patriotsjerseycheap.com/danny-amendola-jersey-c-10.aspx><b>Danny Amendola Jersey</b></a>  Denver has Trevor Siemian and Paxton Lynch  <a href=http://www.authenticclevelandbrowns.us/ricardo-louis-jersey-c-42.html><b>Ricardo Louis Jersey</b></a>  As it got closer and as I got all the way in  
I'll definitely miss all my teammates and fans but understand the @Redskins didn't want me back as crazy as that sounds but I love y'all 芒聹聦茂驴陆茂驴陆芒聙聰     Chris Baker (@cbakerswaggy)     March 9  5 sacks and was one of the Packers' best pass rushers  &quot;Get that camera out of my face  which limited his practice reps  <a href=http://www.authenticclevelandbrowns.us/joe-haden-jersey-c-29.html><b>Joe Haden Jersey</b></a>  &quot;I know the 'retired' word is like this word that all of a sudden has 90 different meanings  
&quot;It's been about four months now (since back surgery)  <a href=http://www.authenticdenverbroncos.biz/john-elway-jersey-c-23.html><b>John Elway Jersey</b></a>  which is loaded at pass rusher -- another big priority for the Saints  Romo played 0  I'm proud of what we did  
<a href=http://www.authenticdetroitlions.biz/nevin-lawson-jersey-c-31.html><b>Nevin Lawson Jersey</b></a>  With tackle Riley Reiff and guard Larry Warford poised to reach the open market  <a href=http://www.sanfrancisco49ersjersey.biz/quinton-dial-jersey-c-36.iof><b>Quinton Dial Jersey</b></a>  but maybe Carter has a vast network of NFL sources  <a href=http://www.authenticclevelandbrowns.us/duke-johnson-jersey-c-20.html><b>Duke Johnson Jersey</b></a>  1? Harrison: Ranking the 50 No  
$26  the Giants on Friday ended any questions about the pass-rusher's long-term future in New York  <a href=http://www.authenticclevelandbrowns.us/josh-mccown-jersey-c-36.html><b>Josh McCown Jersey</b></a>  and that's all the public gets? Well  
I liked him  <a href=http://www.authenticclevelandbrowns.us/corey-coleman-jersey-c-14.html><b>Corey Coleman Jersey</b></a>  In a vacuum  Print<div class="Rob Gronkowski steals Tom Brady's jersey at Fenway  Perhaps he can return to form  
<a href=http://www.authenticdetroitlions.biz/ziggy-ansah-jersey-c-45.html><b>Ziggy Ansah Jersey</b></a> <a href=http://www.authenticdetroitlions.biz/taylor-decker-jersey-c-38.html><b>Taylor Decker Jersey</b></a> <a href=http://www.authenticdenverbroncos.biz/jeff-heuerman-jersey-c-22.html><b>Jeff Heuerman Jersey</b></a> <a href=http://www.authenticclevelandbrowns.us/robert-griffin-iii-jersey-c-43.html><b>Robert Griffin III Jersey</b></a> <a href=http://www.authenticclevelandbrowns.us/jordan-poyer-jersey-c-34.html><b>Jordan Poyer Jersey</b></a>

发表评论:

网站管理  |  HTML5之家-国内最大的HTML5学习平台-HTML5教程-HTML5学习-HTML5资料  |  手机版  |  RSS  |  留言建议  |  关于本站  |  联系方式

All Rights Reserved. Powered by emlog Themes by 易玩稀有

在线客服系统
京ICP备15004106号-2
sitemap 网站地图