这篇文章将为大家详细讲解有关html怎么操作来实现留言板样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司是一家专注于成都网站设计、成都做网站与策划设计,光山网站建设哪家好?成都创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:光山等地区。光山做网站价格咨询:18982081108
HTML留言板具体代码示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页留言板版源码示例</title> </head> <body> <h2>简易留言板</h2> <textarea id="memo" cols="60" rows="10"></textarea> <input type="button" value="追加内容" onclick="saveStorage('memo')" /> <input type="button" value="初始化" onclick="clearStorage('msg')" /> <hr /> <p id="msg"></p> <script type="text/javascript"> function saveStorage(id) { var data = document.getElementById(id).value; var time = new Date().getTime(); localStorage.setItem(time,data); console.log("数据已保存"); loadStorage('msg'); } function loadStorage(id) { var result = '<table border="1">'; for(var i = 0; i < localStorage.length; i++) { var kes = localStorage.key(i); var value = localStorage.getItem(kes); var date = new Date(); date.setTime(kes); var datestr = date.toGMTString(); result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>' } result += '</table>'; var target = document.getElementById(id); target.innerHTML = result; } function clearStorage() { localStorage.clear(); console.log("清除完毕"); } </script> </body> </html>
上述HTML留言板效果如下图:
注:saveStorage() 获取textarea的value值
getTime()获取当前时间戳、setItem()将时间戳作为键值,textarea的value值作为键值的内容保存在本地数据库
localStorage:html5出现的新标签
html5本地存储
基本语句: window.localStorage;
获取: localStorage.getItem(key);
添加: localStorage.setItem(key,value);
修改: localStorage.key = "";
删除: localStorage.removeItem(key);
清除: localStorage.clear();
关于html怎么操作来实现留言板样式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
名称栏目:html怎么操作来实现留言板样式
文章分享:https://www.cdcxhl.com/article16/picgdg.html
成都网站建设公司_创新互联,为您提供标签优化、网站导航、企业网站制作、自适应网站、服务器托管、面包屑导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联