JavaScript基础练习题之留言板

睡个好觉628

于 2024-03-30 20:30:00 发布

阅读量208

点赞数 2

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_68609410/article/details/137116707

版权

一、留言板代码实现：

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>留言板</title>
  <style>
    #outside {

      width: 1000px;

      margin: 0 auto;

      /* border: 1px solid black; */

      overflow: hidden;

      padding-bottom: 15px;

    }



    #outside h3 {

      width: 95%;

      margin: 15px auto;

      padding-bottom: 10px;

      border-bottom: 2px solid red;

      font-family: "宋体", sans-serif;
      color: red;
      font-weight: 900;
      font-size: 25px;

    }



    #outside .comment1 {

      width: 95%;

      margin: 10px auto;

      color: #BBBBBB;

      font-size: 12px;

      border-bottom: 1px dashed red;

      font-family: "宋体", sans-serif;

    }



    #outside .comment1 time {

      float: right;
      color: black;

    }



    #outside .comment1 span {

      color: #5979B2;

      margin-left: 5px;

      font-weight: bold;

    }



    #outside .comment1 p {

      font-size: 16px;

      color: black;

    }



    #outside h4 {

      width: 95%;

      margin: 15px auto;

      color: #404E73;

      font-size: 16px;

      font-weight: bold;

      font-family: "宋体", sans-serif;

    }



    #outside #addComment {

      width: 95%;

      margin: 0 auto;

      font-size: 12px;

      color: #BBBBBB;

    }



    #outside #name {

      width: 200px;

      border: 1px solid #D9E2EF;

    }



    #outside #comContent {

      width: 800px;

      height: 100px;

      resize: none;

      border: 1px solid #D9E2EF;

      vertical-align: text-top;

    }



    #addComment button {

      width: 100px;

      height: 30px;

      background-color: #2D46A3;

      color: white;

      border: hidden;

      float: right;

      margin: 15px 100px;

    }

    .del {
      width: 50px;

      height: 30px;

      background-color: #2D46A3;

      color: white;

      border: hidden;




    }
  </style>
</head>

<body>
  <div id="outside">
    <h3>全部留言</h3>
    <div id="comment">   
    </div>
    <h4>发表留言</h4>
    <div id="addComment">
      昵    称：<input type="text" id="name" />
      <br /><br />
      留言内容:<textarea id="comContent"></textarea>
      <button id='tjpl'>发表留言</button>
    </div>
  </div>
  <script>
    var comment = document.querySelector('#comment');
    var ips = document.querySelector('input');
    var textarea = document.querySelector('textarea');
    var tjpl = document.getElementById('tjpl')
    tjpl.onclick = function () {
      if (ips.value == '' || textarea.value == '') {
        alert("输入不能为空！");
        return;
      }
      var divs = document.createElement('div');
      divs.className = 'comment1';
      divs.innerHTML = '网友昵称:';
      comment.appendChild(divs);
      var spans = document.createElement('span');
      spans.innerHTML = ips.value;
      divs.appendChild(spans);
      var time = document.createElement('time');
      time.innerHTML = new Date().toLocaleString();
      divs.appendChild(time);
      var ps = document.createElement('p');
      ps.innerHTML = textarea.value;
      divs.appendChild(ps);
      var del = document.createElement('button');
      del.className = 'del';
      del.innerHTML = '删除';
      divs.appendChild(del);
     
        del.onclick = function () {
          comment.removeChild(this.parentNode);
        }
      
      ips.value = '' ;
       textarea.value = '';
    }
  </script>
</body>

</html>

二、案例实现