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

本文实例为大家分享了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>

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