本文实例为大家分享了JS实现留言板增删功能的具体代码，供大家参考，具体内容如下
## **JS实现简易留言板的增删功能**
一个很简单的留言板，实现**增删**功能，因为没有数据库，所以只是一个静态的留言板功能。
**修改**功能其实也可以添加，但是我现在技术不够，等以后可能会添加**修改**功能。
代码很简单，注释很清楚。```
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .cle:after { height: 0; clear: both; visibility: hidden; display: none; content: ""; } .bbslist { width: 400px; margin: 10px auto; border-radius: 5px; background: #A6A6A6; border: 1px solid #a6a6a6; } .bbslist>ul { margin: 8px 10px 10px 10px; display: block; clear: both; text-align: center; box-shadow: 3px 3px 25px #A6A6A6; } .bbslist>ul>li { background: #f4f4f4; margin: 10px 0; line-height: 30px; height: 30px; border-radius: 5px; text-align: center; box-shadow: 3px 3px 17px #A6A6A6; padding: 0 5px; font-size: 12px; border: 1px solid #a6a6a6; position: relative; transition: all 0.5s; animation: liBg 0.3s; overflow: hidden; } @keyframes liBg { from { background: #442222; opacity: 0; left: -20px; height: 0; } to { background: #f4f4f4; opacity: 1; left: 0; height: 30px; } } .mesDiv { width: 400px; background: #eee; height: 130px; border: 1px solid #a6a6a6; margin: 20px auto; border-radius: 5px; box-shadow: 3px 3px 17px #A6A6A6; animation: msgHeight 0.5s; overflow: hidden; } @keyframes msgHeight { from { height: 0; margin-top: 50px; opacity: 0; } to { height: 130px; margin-top: 20px; opacity: 1; } } .inputSty { width: 90%; height: 30px; display: block; color: #666; border: 1px solid #ddd; padding-left: 5px; line-height: 30px; font-size: 12px; clear: both; margin: 10px auto; border-radius: 5px; } .btnSty { width: 30%; height: 25px; margin: 0 auto; display: block; cursor: pointer; transition: all 0.2s; border-radius: 5px; box-shadow: 3px 3px 10px #A6A6A6; } .btnSty:hover { width: 20%; height: 30px; border-radius: 5px; box-shadow: 3px 3px 10px #A6A6A6; } .userSty { width: 25%; height: 25px; margin: 8px 18px 3px 18px; border-radius: 5px; box-shadow: 3px 3px 10px #A6A6A6; } .dd { width: 135px; height: 10px; position: relative; top: -10px; font-size: 8px; float: right; clear: both; } .delbtn{ width: 35px; height: 22px; border-radius: 5px; position: relative; top: 5px; right: -4px; float: right; z-index: 2; color: red; /* box-shadow: 2px 2px 3px #A6A6A6; */ } </style></head> <body> <div class="mesDiv"> <input id="userId" class="userSty" type="button" value="您的姓名"> <input id="msgId" class="inputSty" type="text" placeholder=""> <input id="btnId" class="btnSty" type="button" value="提交留言"> </div> <div class="bbslist cle" id="masMan"> <ul id="ulId"> <li>— — — 留言列表 — — —</li> </ul> </div> <script type="text/javascript"> //定义一个函数用来重复获取gId("value"),中value的ID属性 function gId(n) { return document.getElementById(n); } //获取姓名 gId("userId").onclick = function () { var username = prompt("请输入您的姓名:"); alert("您好！" + username + "。"); gId("userId").value = username + "的留言："; } //删除留言 function delMsg(d) { var parentUl = d.parentNode; var parentDiv = parentUl.parentNode; parentDiv.removeChild(parentUl); } //提交留言 gId('btnId').onclick = function () { //获取时间 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth() + 1; var day = today.getDate(); var hours = today.getHours(); var min = today.getMinutes(); var second = today.getSeconds(); var time = year + "年" + month + "月" + day + "日" + " " + hours + "时" + min + "分" + second + "秒"; // var v = ; if (gId('msgId').value === '') { alert("留言不能为空"); return false; } //创建li else { //创建一个新元素ul var ulcrate = document.createElement('ul'); //创建新元素li var licrate = document.createElement('li'); //创建一个时间盒子 var divcrate = document.createElement('div'); //创建一个删除按钮 var delbtn = document.createElement('input'); //给删除按钮赋属性 delbtn.setAttribute('type', 'button'); delbtn.setAttribute('class', 'delbtn'); delbtn.setAttribute('value', '删除'); delbtn.setAttribute('onclick', 'delMsg(this)'); //给创建的ul赋属性 ulcrate.setAttribute('id', 'ulId'); //给时间盒子设置属性 // divcrate.setAttribute('class', 'dd'); divcrate.className = "dd"; //向li里添加在输入框中获取的值 licrate.innerHTML = gId('msgId').value; //把，删除按钮，留言内容，时间盒子添加到创建的ul里 ulcrate.appendChild(delbtn); ulcrate.appendChild(licrate); ulcrate.appendChild(divcrate); //给时间盒子传递时间 divcrate.innerHTML = time; //把创建的ul添加到最外层的div里 gId('masMan').appendChild(ulcrate); //留言内容初始化 gId("msgId").value = ""; } } </script></body></html>
新闻热点
疑难解答
图片精选
