JS实现留言板功能[楼层效果展示]


Posted in Javascript onDecember 27, 2017

功能实现:

1.发布人和发布内容非空校验
2.编辑删除功能
3.楼层效果展示
4.发布时间展示

效果图

JS实现留言板功能[楼层效果展示] 

目录

JS实现留言板功能[楼层效果展示] 

tools.js

时间工具包

function getTime(){
  var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth()+1;
  var da = date.getDate();
  var hour = date.getHours()<10 ? "0"+date.getHours() : date.getHours() ;
  var minute = date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes() ;
  var second = date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds() ;
  var week = date.getDay();
  var time = year+"年"+month+"月"+da+"日 "+hour+":"+minute+":"+second +" "+weeks[week];
  return time;
}

留言板.html

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="tools.js"></script>
    <style>
      #box {
        width: 800px;
        margin: 0 auto;
      }
      textarea {
        width: 800px;
      }
      #li {
        display: block;
        border-bottom: 1px dashed #ebebeb;
        margin: 10px 0;
        padding: 8px 0;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <h3>留言板 </h3>
      发布人:<input type="text" id="person" value="">
      共<input style="border: 0;" name="" id="louceng">
      <textarea name="" id="text" rows="10"></textarea>
      <input type="button" value="确认发布" id="btn" />
      <h3>全部留言</h3>
      <hr/>
    </div>
    <script>
      var num = 0;
      var num1 = 0;
      var box = document.getElementById("box");
      var text = document.getElementById("text");
      var btn = document.getElementById("btn");
      var person = document.getElementById("person");
      var ul = document.createElement("ul");
      ul.id = "ul1";
      var time = document.createElement("div");
      document.getElementById("louceng").value=num+"楼";
      btn.onclick = function() {
        //非空判断
        if(person.value==""||person.value==null){
          alert("发布人不允许为空!");
          return false;
        }
        if(text.value==""||text.value==null){
          alert("内容不允许为空!");
          return false;
        }
        //获取时间
        num = num+1;
        var datetime = getTime();
        time = document.createTextNode("发布时间:" + datetime);
        var li = document.createElement("li");
        li.id = "li";
        //创建删除功能
        var oA = document.createElement("a");
        var oAtext = document.createTextNode("删除");
        oA.href = "#";
        oA.appendChild(oAtext);
        //创建发布文本框
        var fabu = document.createElement("textarea");
        fabu.rows = "10";
        fabu.style = "margin: 0px; width: 760px; height: 138px;";
        fabu.value = text.value;
        fabu.disabled="disabled";
        //创建编辑功能
        var oB = document.createElement("a");
        var oBtext = document.createTextNode("编辑");
        oB.href = "#";
        oB.appendChild(oBtext);
        //创建确认按钮
        var butt = document.createElement("input");
        butt.type = "button";
        butt.value = "确认";
        butt.style.display = "none";
        //解决兼容问题
        var ali = ul.getElementsByTagName("li");
        if(ali.length == 0) {
          ul.appendChild(li);
        } else {
          ul.insertBefore(li, ali[0]);
        }
        //添加节点
        box.appendChild(ul);
        var lou = document.createTextNode("第"+num+"楼");
        var persons = document.createTextNode("发布人:"+ person.value);
        document.getElementById("person").value="";
        var textnode = document.createTextNode("发布内容:");
        document.getElementById("text").value="";
        li.appendChild(lou);
        li.appendChild(document.createElement("br"));
        li.appendChild(persons);
        li.appendChild(document.createElement("br"));
        li.appendChild(textnode);
        li.appendChild(document.createElement("br"));
        li.appendChild(fabu);
        li.appendChild(time);
        li.appendChild(oA);
        li.appendChild(oB);
        li.appendChild(butt);
        //删除
        oA.onclick = function() {
          ul.removeChild(this.parentNode);
          //删除时更新
          num1++;//删除次数
          document.getElementById("louceng").value=num-num1+"楼";
        };
        //编辑
        oB.onclick = function() {
          fabu.disabled = "";
          butt.style.display = "block";
        }
        //确认更改
        butt.onclick = function() {
          fabu.disabled="disabled";
          butt.style.display = "none";
        }
        //楼层展示
        document.getElementById("louceng").value=num-num1+"楼";
      }
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的JS实现留言板功能[楼层效果展示],希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
js判断节假日实例代码
Dec 27 #Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 #Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 #Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 #Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 #Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 #Javascript
简单的Vue异步组件实例Demo
Dec 27 #Javascript
You might like
php中error与exception的区别及应用
2014/07/28 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
php中使用sftp教程
2015/03/30 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
js实现div的切换特效上一个下一个
2014/02/11 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
女大学生个人求职信
2013/12/09 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
5s推行计划书
2014/05/06 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
心术观后感
2015/06/11 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers