js实现留言板-楼层效果展示

来源：互联网发布：淘宝上海故事披肩编辑：程序博客网时间：2024/04/26 17:21

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

目录

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>

阅读全文

'); })();