JS實現簡易留言板增刪功能
阿新 • • 發佈:2020-02-10
本文例項為大家分享了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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。