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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jquery插件validate验证的小例子
May 08 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
JS数据类型分类及常用判断方法
Nov 19 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
技术人员面试提纲
2013/11/28 职场文书
车间副主任岗位职责
2013/12/24 职场文书
军训考核自我鉴定
2014/02/13 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
活动总结怎么写
2014/04/28 职场文书
技术负责人任命书
2014/06/05 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
超市工作总结范文2014
2014/12/19 职场文书
端午节活动总结报告
2015/02/11 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python