JS实现简易留言板增删功能

日期: 2020-06-22 17:42:22

本文实例为大家分享了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>—&nbsp;—&nbsp;—&nbsp;留言列表&nbsp;—&nbsp;—&nbsp;—</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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持奥多码。

上一篇：jQuery实现简单聊天室

下一篇：使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法