快捷導航

JS實現(xiàn)簡易留言板增刪功能

更新時間：2020年02月08日 08:09:23 作者：滿艦飾v

這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易留言板增刪功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)留言板增刪功能的具體代碼，供大家參考，具體內(nèi)容如下

## **JS實現(xiàn)簡易留言板的增刪功能**
一個很簡單的留言板，實現(xiàn)**增刪**功能，因為沒有數(shù)據(jù)庫，所以只是一個靜態(tài)的留言板功能。
**修改**功能其實也可以添加，但是我現(xiàn)在技術(shù)不夠，等以后可能會添加**修改**功能。
代碼很簡單，注釋很清楚。```

<!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>—&nbsp;—&nbsp;—&nbsp;留言列表&nbsp;—&nbsp;—&nbsp;—</li>
 </ul>
 </div>
 <script type="text/javascript">
 //定義一個函數(shù)用來重復獲取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;
  }
  //創(chuàng)建li
  else {
  //創(chuàng)建一個新元素ul
  var ulcrate = document.createElement('ul');
  //創(chuàng)建新元素li
  var licrate = document.createElement('li');
  //創(chuàng)建一個時間盒子
  var divcrate = document.createElement('div');
  //創(chuàng)建一個刪除按鈕
  var delbtn = document.createElement('input');
  //給刪除按鈕賦屬性
  delbtn.setAttribute('type', 'button');
  delbtn.setAttribute('class', 'delbtn');
  delbtn.setAttribute('value', '刪除');
  delbtn.setAttribute('onclick', 'delMsg(this)');
  //給創(chuàng)建的ul賦屬性
  ulcrate.setAttribute('id', 'ulId');
  
  //給時間盒子設(shè)置屬性
  // divcrate.setAttribute('class', 'dd');
  divcrate.className = "dd";
  //向li里添加在輸入框中獲取的值
  licrate.innerHTML = gId('msgId').value;
  
  
  //把，刪除按鈕，留言內(nèi)容，時間盒子添加到創(chuàng)建的ul里
  ulcrate.appendChild(delbtn);
  ulcrate.appendChild(licrate); 
  ulcrate.appendChild(divcrate);
  //給時間盒子傳遞時間
  divcrate.innerHTML = time;
  //把創(chuàng)建的ul添加到最外層的div里
  gId('masMan').appendChild(ulcrate);
  //留言內(nèi)容初始化
  gId("msgId").value = "";
  }
 }
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: