<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>留言板</title> <style type="text/css"> *{margin:0; padding:0;} #comment {margin-top:30px;overflow:hidden;} #comment p { margin-bottom:10px; padding:10px; border-radius:5px; font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva; } #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;} #comment p .msg{width:738px;float:left;} #comment p .datetime{width:200px; color:#999; text-align:right;} #content #content:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';} #content { margin-top:150px; } #tip { display:block; margin-bottom:15px; } .dark-matter { margin-left: auto; margin-right: auto; max-width: 500px; background: #555; padding: 20px 30px 20px 30px; font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #D3D3D3; text-shadow: 1px 1px 1px #444; border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .dark-matter h1 { padding: 0px 0px 10px 40px; display: block; border-bottom: 1px solid #444; margin: -10px -30px 30px -30px; } .dark-matter h1>span { display: block; font-size: 11px; } .dark-matter label { display: block; margin: 0px 0px 5px; } .dark-matter label>span { float: left; width: 20%; text-align: right; padding-right: 10px; margin-top: 10px; font-weight: bold; } .dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select { border: none; color: #525252; height: 25px; line-height:15px; margin-bottom: 16px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 5px 0px 5px 5px; width: 70%; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background: #DFDFDF; } .dark-matter select { background: #DFDFDF url('down-arrow.png') no-repeat right; background: #DFDFDF url('down-arrow.png') no-repeat right; appearance:none; -webkit-appearance:none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; width: 70%; height: 35px; color: #525252; line-height: 25px; } .dark-matter textarea{ height:100px; padding: 5px 0px 0px 5px; width: 70%; display:block; } .dark-matter input[type="button"] { background: #FFCC02; border: none; padding: 10px 25px 10px 25px; color: #585858; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: 1px 1px 1px #FFE477; font-weight: bold; box-shadow: 1px 1px 1px #3D3D3D; -webkit-box-shadow:1px 1px 1px #3D3D3D; -moz-box-shadow:1px 1px 1px #3D3D3D; } .dark-matter input[type="button":hover { color: #333; background-color: #EBEBEB; } </style> <script type="text/javascript"> var Storage = { saveData:function()//保存数据 { var data = document.querySelector("#content 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; document.getElementById("tip").innerHTML = "你还可以输入140字"; }, 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();}//清空所有已保存的数据 } function get() { var data = document.querySelector("#content textarea"); var len = data.value.length; var remain = 140-len; if(remain<0) { document.getElementById("tip").innerHTML = "超过字数限制"; } else document.getElementById("tip").innerHTML = "你还可以输入"+ remain +"字"; } </script> </head> <body> <div id="content"> <div id = "main" class = "dark-matter"> <h1>Contact Form</h1> <p>Your Name : </p> <input type = "text"></input> <p>Comment :</p> <textarea id = "in" onkeyup="get()" maxlength="140"></textarea> <strong id = "tip">请输入你的评论</strong> <input id="postBt" type="button" value="发表评论"/> <input id="clearBt" type="button" value="清空所有已保存的数据"/> </div> <div id="comment"></div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>留言板</title> <style type="text/css"> *{margin:0; padding:0;} #comment {margin-top:30px;overflow:hidden;} #comment p { margin-bottom:10px; padding:10px; border-radius:5px; font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva; } #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;} #comment p .msg{738px;float:left;} #comment p .datetime{200px; color:#999; text-align:right;} #content #content:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';} #content { margin-top:150px; } #tip { display:block; margin-bottom:15px; } .dark-matter { margin-left: auto; margin-right: auto; max- 500px; background: #555; padding: 20px 30px 20px 30px; font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #D3D3D3; text-shadow: 1px 1px 1px #444; border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .dark-matter h1 { padding: 0px 0px 10px 40px; display: block; border-bottom: 1px solid #444; margin: -10px -30px 30px -30px; } .dark-matter h1>span { display: block; font-size: 11px; } .dark-matter label { display: block; margin: 0px 0px 5px; } .dark-matter label>span { float: left; 20%; text-align: right; padding-right: 10px; margin-top: 10px; font-weight: bold; } .dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select { border: none; color: #525252; height: 25px; line-height:15px; margin-bottom: 16px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 5px 0px 5px 5px; 70%; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background: #DFDFDF; } .dark-matter select { background: #DFDFDF url('down-arrow.png') no-repeat right; background: #DFDFDF url('down-arrow.png') no-repeat right; appearance:none; -webkit-appearance:none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; 70%; height: 35px; color: #525252; line-height: 25px; } .dark-matter textarea{ height:100px; padding: 5px 0px 0px 5px; 70%; display:block; } .dark-matter input[type="button"] { background: #FFCC02; border: none; padding: 10px 25px 10px 25px; color: #585858; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: 1px 1px 1px #FFE477; font-weight: bold; box-shadow: 1px 1px 1px #3D3D3D; -webkit-box-shadow:1px 1px 1px #3D3D3D; -moz-box-shadow:1px 1px 1px #3D3D3D; } .dark-matter input[type="button":hover { color: #333; background-color: #EBEBEB; } </style> <script type="text/javascript"> var Storage = { saveData:function()//保存数据 { var data = document.querySelector("#content 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; document.getElementById("tip").innerHTML = "你还可以输入140字"; }, 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();}//清空所有已保存的数据 } function get() { var data = document.querySelector("#content textarea"); var len = data.value.length; var remain = 140-len; if(remain<0) { document.getElementById("tip").innerHTML = "超过字数限制"; } else document.getElementById("tip").innerHTML = "你还可以输入"+ remain +"字"; } </script> </head> <body> <div id="content"> <div id = "main" class = "dark-matter"> <h1>Contact Form</h1> <p>Your Name : </p> <input type = "text"></input> <p>Comment :</p> <textarea id = "in" onkeyup="get()" maxlength="140"></textarea> <strong id = "tip">请输入你的评论</strong> <input id="postBt" type="button" value="发表评论"/> <input id="clearBt" type="button" value="清空所有已保存的数据"/> </div> <div id="comment"></div> </div> </body> </html>