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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
实例解析Array和String方法
Dec 14 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
js实现的在本地预览图片功能示例
Nov 09 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
PHP4.04简明安装
2006/10/09 PHP
php 保留小数点
2009/04/21 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
PHP7新特性简述
2017/06/11 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
python模块之paramiko实例代码
2018/01/31 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python super()函数的基本使用
2020/09/10 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
Shell编程面试题
2016/05/29 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
运动会广播稿30字
2014/01/21 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
文明倡议书
2015/01/19 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
讲解MySQL增删改操作
2022/05/06 MySQL
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python