本文實例為大家分享了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>
新聞熱點
疑難解答
圖片精選
