这次留言板运用到了最基础的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）的更多相关文章

  1. javascript-DOM操作-留言板制作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. PHP留言板制作（MySQL+PHP）

    参考视频:https://www.bilibili.com/video/BV1Js411i74j?p=8 环境:phpstudy 2018        PHP 5.X     PHPmyadmin ...

  3. php写留言板

    简单的PHP留言板制作 做基础的留言板功能  需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method=&qu ...

  4. 利用Asp.net和Sql Server实现留言板功能

    本教程设及到:使用SQL Server查询分析器创建数据库:SQL查询语句常用的一些属性值:触发器创建和使用:存储过程的创建,ASP使用存储过程. 正文: 一.创建数据库: 创建一个feedback数 ...

  5. js制作留言板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 问题：关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  7. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  8. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  9. 留言板（初学者使用js实现）

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. UWP开发之控件：用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  2. [.net 面向对象程序设计进阶] (26) 团队开发利器（五）分布式版本控制系统Git——图形化Git客户端工具TortoiseGit

    [.net 面向对象程序设计进阶] (26) 团队开发利器(五)分布式版本控制系统Git——图形化Git客户端工具TortoiseGit 读前必备: 接上篇: 分布式版本控制系统Git——使用GitS ...

  3. .NET陷阱之六：从枚举值持久化带来大量空间消耗谈起

    好长时间没有写博文了,今天继续. 这次跟大家分享的内容起因于对一个枚举值列表的序列化,下面简化后的代码即能重现.为了明确起见,我显式指定了枚举的基础类型. // 定义一个枚举类型. public en ...

  4. Scrapy爬取自己的博客内容

    python中常用的写爬虫的库有urllib2.requests,对于大多数比较简单的场景或者以学习为目的,可以用这两个库实现.这里有一篇我之前写过的用urllib2+BeautifulSoup做的一 ...

  5. CLR via C# 学习计划

    本书是学习c#的人必读书,计划今年完成,读透. 书是在亚马逊买的,虽然有点小贵,但是为了情怀,咬咬牙买了. 需要学习的: CLR基础 (CH1-CH3) 设计类型 (CH4-CH13) 基本类型 (C ...

  6. JSON数据的定义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 使用Emit把Datatable转换为对象集合(List<T>)

    Emit生成动态方法部分摘自网上,但是经过修改,加入了对委托的缓存以及类结构的调整,使之调用更简洁方便.大致的思路是:要实现转换datatable到某个指定对象的集合,本质是实现转换一个datarow ...

  8. CPU占用率呈正弦实现,及实时输出进程和线程的CPU占用率

    CPU占用率呈正弦实现,及实时输出进程和线程的CPU占用率 #include "stdafx.h" #include <windows.h> #include < ...

  9. JSP的基本语法

    JSP的基本语法 一.JSP页面中的JAVA代码 二.JSP页面中的指令 三.JSP页面中的隐含对象(九大内置对象) 目录 一.JSP页面中的JAVA代码 JSP表达式(方便输出) JSP小脚本(完成 ...

  10. 实现python中的map函数

    假设Python没有提供map()函数,自行编写my_map()函数实现与map()相同的功能.以下代码在Python 2.7.8中实现. 实现代码: def my_map(fun,num): i = ...