html自动留言,html 留言板
*{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;}
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 += "
" + data[0] + "" + data[1] + "
";
}
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();}//清空所有已保存的数据
}
HTML5--JS API-本地存储 Web留言板
html自动留言,html 留言板相关推荐
- php留言板显示不出,php留言板源代码_php留言代码留言后显示乱码
问题补充: 首页输出留言代码 error_reporting(0); header('Content-Type:text/html;charset=utf-8'); mysql_connect('lo ...
- CSDN:解决粉丝网友集中问题留言处,把你所有的问题在留言处留言,我会一一回答
CSDN:解决粉丝网友集中问题留言处,把你所有的问题在留言处留言,我会一一回答 目录 一.粉丝索取资料免费下载专区 二.问题集中回答处 1.第一种方法--在对应博客下或者工作室留言板留言 2.备用第二 ...
- 为什么都要鄙视 PHP 程序员? Java联盟 百家号 07-24 21:43 前几天发表了一篇文章《图解:程序员之间是如何相互鄙视的?》,有人就在留言处留言。 可以解释下:为什么都鄙视PHP工程师
为什么都要鄙视 PHP 程序员? Java联盟 百家号 07-24 21:43 前几天发表了一篇文章<图解:程序员之间是如何相互鄙视的?>,有人就在留言处留言. 可以解释下:为什么都鄙视P ...
- 留言薄+留言薄==BBS
留言薄+留言薄==BBS其实纯属无聊 目前,免费的BBS申请越来越少了,而且,申请到的质量也不高,因此我们可以采用申请留言薄的方法来拼一个 BBS起来,很简单,方法如下: 首先随便找个地方,申请几个免 ...
- 品牌为Synaptics的触控板如何外接鼠标后自动禁用触控板
文章编号:105384 2013/10/16 2:10:10 相关文章 · Lenovo笔记本各类型触控板,触摸部分只能移动无法点击 · 笔记本电脑如何禁用或解锁触控板 · 设置ELAN触 ...
- 自动售货机驱动板与android,一种自动售货机的逻辑驱动板的制作方法
本实用新型涉及自动售货机领域,特别是一种自动售货机的逻辑驱动板. 背景技术: 目前,现有的自动售货机驱动板所有电机的接线均接到一块驱动板上,线束繁多,成本高,安装不便.如果货道多的话,驱动板的MCU的 ...
- ajax回复留言,Ajax 留言板模拟
这一节我们利用 Ajax 制作一个留言板模拟,之所以叫模拟,是由于没有将留言内容存入数据库,而只是假像地处理,因为这里着重讨论 Ajax,暂时就不涉及数据库操作. 这里我们模拟了留言失败的情况,每次提 ...
- 抖音自动评论回复留言测试
主要实现方式是android的无障碍.目前还在优化中 可以联系我进行交流 二.搜索关键词:寻找关键词相关视频. 三.点击视频播放并在第一条评论[置顶与不置顶都可]下进行自定义文字留言. 四.操作完以上 ...
- Discuz论坛 自动加好友留言程序
目录 [隐藏] 1 思路: 2 代码: 2.1 登录,获取Cookie: 2.2 获取FormHash: 2.3 发送加好友请求并留言: 思路: 一波未平一波又起, 拿到这个需求的时候对我来说还是有挑 ...
- ubuntu下使用脚本自动禁用笔记本触摸板和键盘
我喜欢把外接键盘放在笔记本键盘上,难免会误触到,所以想写个脚本检测到有外接键盘自动禁用掉笔记本键盘.主要使用xinput来实现. 如下是脚本,可以直接执行进行测试(一般来说你要改下脚本里面前面的几个名 ...
最新文章
- 读《杜拉拉升职记》有感
- 设置EditText光标颜色
- Mybatis 配置文件
- Spark之spark shell
- mybatis学习(41):使用逆向工程
- Python爬虫的基本原理
- tomcat顶层架构
- 为什么数据库连接很消耗资源?
- Scrapy Crawl 运行出错 AttributeError: 'xxxSpider' object has no attribute '_rules' 的问题解决...
- java服务发现_【Java】Eureka – 服务发现(Server)
- 导出数据报ORA-39002: 操作无效 ORA-39070: 无法打开日志文件。 ORA-39087: 目录名 DUMP_DIR 无效...
- reverse() ; sort() ; sorted()
- 手机app测试用例怎么写?手机app测试点有哪些?
- python实例(二):判断输入的车牌归属地
- jinja2说明文档
- 【工具】百度云破解版不用会员高速下载 分享
- 现实赢了袖手旁观他在冷眼看我们
- natapp自动获取免费的动态端口域名
- C语言之strrchr函数
- xml开发笔记(一):tinyXml2库介绍、编译和工程模板
热门文章
- 数据库、数据源和数据库连接池
- redis tutorial
- 3.第一个HelloMaven/快速入门
- ubuntu14.04 解决屏幕亮度无法调节的问题
- iOS runtime实用篇解决常见Crash
- 监控一个大事务的回滚
- EXTJS4.0 EXT文件目录,本地加载文档,命名规范
- linux重新初始化mysql 并修改大小写铭感_在Linux(Centos 7)环境下安装Mysql的完整过程...
- NavicatPremium-Mac-无法打开问题
- Intel APIC Configuration