html的留言板制作（js）
这次留言板运用到了最基础的localstorage的本地存储，展现的效果主要有：
1.编写留言
2.留言前可以编辑自己的留言昵称。
不足之处:
1.未能做出我喜欢的类似于网易的叠楼功能。
2.未能显示评论楼层(可实现，但是插进去十分不美观)。
编辑效果如下：
文件为html文件，编写的方式主要为div+css布局和js。本人的有点在于编写类似于后台功能和js的实现较快。但是缺点在于前端的编写较为薄弱。
在学长的帮助下前端的设计还是比较美观的。下面我将开放记事本的全部源码。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>记事本</title>
<style type="text/css">
*{margin:; padding:;}
body,input{font-size:14px; line-height:24px; color:#; 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:black;}
#content #post,#comment p{zoom:;}
#content #post:after,#comment p:after{display:block; height:; clear:both; visibility:hidden; overflow:hidden; content:'.';}
.transition{-webkit-transition:all .5s linear; -moz-transition:all .5s linear; -o-transition:all .5s linear; -ms-transition:all .5s linear; transition:all .5s linear;}
#content{margin: auto; width:960px; overflow:hidden;}
#content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;
height: 556px;
}
#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 .right{text-align:right;}
#comment p .msg{width:738px;}
#comment p .datetime{width:200px; color:#; text-align:right;} </style>
<script type="text/javascript">
var named;
function delete1(id)
{
localStorage.removeItem(id);
this.Storage.writeData();
}
function prom() { var name = prompt("请输入您的名字", "");//将输入的内容赋给变量 name ，
named = name;
//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值 if (named)//如果返回的有内容 { alert("欢迎您：" + name)
document.getElementById("shangtian").style.display = "none";
document.getElementById("ritian").value = named; }
else {
document.getElementById("ritian").value = "匿名发言者";
} }
var Storage =
{
saveData:function()//保存数据
{ var data = document.querySelector("#post textarea");
if(data.value != "")
{
var time = new Date().getTime() + Math.random() * ;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
if (named) {
localStorage.setItem(time, data.value + "|" + named + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率
}
else
{
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-; i >= ; i--)//效率更高的循环方法
{
data = localStorage.getItem(localStorage.key(i)).split("|"); //dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span><span>" + data[2]+"</span></p>";
dataHtml += "<span style=>" + data[] + "<span style=\"float:right\">" + data[] + "</span><p><span class=\"msg\">" + data[] + "<input style=\"float:right;border:none;border-radius:5px;\" id=\"clearBt\" type=\"button\" onclick=\"delete1(" + localStorage.key(i) + ");\" value=\"删除\"/>" + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
},
clearData:function()//清空数据
{
if(localStorage.length > )
{
if(window.confirm("清空后不可恢复，是否确认清空？"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("没有需要清空的数据！");
}
},
getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
{
var isZero = function(num)//私有方法，自动补零
{
if(num < )
{
num = "" + num;
}
return num;
} var d = new Date();
return d.getFullYear() + "-" + isZero(d.getMonth() + ) + "-" + 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>留言板</h1> <div id="content">
<div id="post">
<div style="background:#3EADC5 ;height:30px;">
昵称：<input type="submit" id="shangtian" name="Submit3" style="border:none; background-color:#3EADC5; color:white;" value="默认用户点击改变" onclick="prom()" />
<input type="text" id="ritian" style="border:none; background-color:#3EADC5; color:white;" onclick="prom()"/>
<!--disabled="disabled"-->
</div>
<div>
<textarea class="transition"></textarea>
</div>
<input id="postBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="发表留言"/>
<input id="clearBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="清空"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>
html的留言板制作（js）的更多相关文章
- javascript-DOM操作-留言板制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- PHP留言板制作（MySQL+PHP）
参考视频:https://www.bilibili.com/video/BV1Js411i74j?p=8 环境:phpstudy 2018 PHP 5.X PHPmyadmin ...
- php写留言板
简单的PHP留言板制作 做基础的留言板功能 需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method=&qu ...
- 利用Asp.net和Sql Server实现留言板功能
本教程设及到:使用SQL Server查询分析器创建数据库:SQL查询语句常用的一些属性值:触发器创建和使用:存储过程的创建,ASP使用存储过程. 正文: 一.创建数据库: 创建一个feedback数 ...
- js制作留言板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 问题：关于一个贴友的js留言板的实现
需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...
- [js高手之路] vue系列教程 - 实现留言板todolist(3)
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...
- 用js做一个简单的留言板效果
html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...
- 留言板（初学者使用js实现）
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- c#处理空白字符
空白字符是指在屏幕不会显示出来的字符(如空格,制表符tab,回车换行等).空格.制表符.换行符.回车.换页垂直制表符和换行符称为 “空白字符”,因为它们为与间距单词和行在打印的页 )的用途可以读取更加 ...
- MSBuild的简单介绍与使用
MSBuild 是 Microsoft 和 Visual Studio的生成系统.它不仅仅是一个构造工具,应该称之为拥有相当强大扩展能力的自动化平台.MSBuild平台的主要涉及到三部分:执行引擎.构 ...
- PHP是怎么运行的
这篇文章,研究一下PHP代码是如何解释和执行以及PHP脚本运行的生命周期. 概述 PHP服务的启动.严格来说,PHP的相关进程是不需要手动启动的,它是随着Apache的启动而运行的.当然,如果有需要重 ...
- 【腾讯Bugly干货分享】WebP原理和Android支持现状介绍
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/582939577ef9c5b708556b0d 1.背景 目前网络中图片仍然是占 ...
- 如何在Visual Studio 工程之间共享静态内容 (js, css, img, etc.)
第一步: 文件夹上点击右键 -> Add -> Existing Item,单击选中文件,不要点击“Add”按钮,而是在“Add”按钮右边有个向下的小箭头,点击这个箭头,再点击“Add ...
- 在VMWare中建立Hadoop虚拟集群的详细步骤（使用CentOS）
最近在学习Hadoop,于是想使用VMWare建立一个虚拟的集群环境.网上有很多参考资料,但参照其步骤进行设置时却还是遇到了不少问题,所以在这里详细写一下我的配置过程,以及其中遇到的问题及相应的解决方 ...
- 到底应该选择那种Linux.NET的部署方式？
当前部署Linux.NET环境的方式可谓是五花八门,既有传统的源码编译的方式.又有各式各样的一键安装脚本.还有绿色包安装方式,而随着Mono官方的新站上线,更增加了采用RPM包的部署方式.那对于一名L ...
- 在JavaScript中对HTML进行反转义
在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几 ...
- C语言 · 最小公倍数
问题描述 编写一函数lcm,求两个正整数的最小公倍数. 样例输入 一个满足题目要求的输入范例.例:3 5 样例输出 与上面的样例输入对应的输出.例: 数据规模和约定 输入数据中每一个数的范围. 例:两 ...
- JavaScript中闭包之浅析解读
JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常 ...