实现简易留言板

超、凢脫俗 2022-12-13 04:54 180阅读 0赞

所用知识点

//声明一个日期函数

var date=new Date();

//分别获取当时的年,月,日,时,分,秒,星期

var year=date.getFullYear();

var month=date.getMonth()+1; 在js中,0代表一月

var day=date.getDate();

var hour=date.getHours();

var min=date.getMinutes();

var sec=date.getSeconds();

var week=date.getDay(); 在js中,星期日为0

setInterval(function()\{

count();

\},1000)

每隔1000ms执行一次count函数

Dom常用操作

增:

document.createElement() //创建元素

parent.appendChild() //尾部插入

parent.insertBefore(new,old) //从元素前插入

parent.innerHTML=''

删:

ele.remove() //删除自己

parent.removeChild(Child) //删除子元素

parent.innerHTML=''

查:

document.getElementById()

document.getElementsByClassName()

document.getElementsByName()

document.getElementsByTagName()

//以下两种方法支持选择器

document.querySelector(selector) //得到的是满足条件的第一个元素

document.querySelectorAll() //得到的是满足条件的所有集合

修改:

对内容的修改 表单: ele.value

非表单: ele.innerText=' ' (结果只为文本)

ele.innerHTML=' ' (结果包含标签)

属性 固有属性(元素对象的属性) ele.attribute (ele.src)

ele\[attribute\] (ele\[attribute\])

两者之间的区别:.后面只能为属性值,不能为字符串

\[\]内的attribute可以为变量,而.后不可以

当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用

classList得到class的集合,其包含3个属性

ele.classList.add();

ele.classList.remove();

ele.classList.replace(old.new)

自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)

以下三种方法既可以操作固有属性,又可以操作自定义属性

ele.getAttribute(属性名)

ele.setAttribute(属性名.属性值) //本身自带新增功能

ele.removeAttribute(属性名)

disabled 禁用表单元素

selected 下拉框

checked 单选,复选框

以上三种的值全为boolean类型

childern:获取当前元素的所有子元素节点

parentNode:获取当前元素的父元素节点

firstElementChild:获取当前元素的第一个子元素节点

lastElementChild:获取当前元素的最后一个子元素节点

nextElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)

previousElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)

nextSibling:获取当前元素的下一个兄弟节点

previousSibling:获取当前元素的上一个兄弟节点

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能

1.每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差

2.必须事先指定所有事件处理程序而导致的DOM访问次数增多，会延迟整个页面的交互就绪时间

对"事件处理程序过多"问题的解决方案就是事件委托。

1.可以对未生成的DOM绑定事件

2.事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

oUl.onclick = function (e) \{

var ev = event || e;

// 获取事件源

var target = ev.target;

// 判断事件源

if (target.nodeName === 'LI') \{  // li

console.log(target.innerText);

解决兼容:

oList.onclick = function (e) \{

// 获取事件源

var ev = event || e;

var target = ev.target || ev.srcElement;

// 判断事件源

if (target.nodeName == 'LI') \{

oText.innerHTML = target.innerHTML;

oList.style.display = 'none';

上代码：

<!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>大作业_留言板</title>
    </head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
    
      body {
        width: 100%;
        height: 100%;
        background: rgb(65, 65, 63);
      }
    
      .bacground {
        width: 700px;
        height: 100%;
        background: white;
        margin: auto;
        margin-top: 20px;
      }
    
      .head,
      .pop-head {
        height: 50px;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
      }
    
      .name {
        width: 640px;
        height: 40px;
        font-size: 20px;
        margin: 10px 28px;
        line-height: 50px;
        border-radius: 8px;
        border: 2px solid rgb(139, 137, 137);
        outline: none;
      }
    
      .content,
      .pop-reply {
        width: 640px;
        height: 150px;
        font-size: 22px;
        margin: 10px 28px;
        border: 2px solid rgb(139, 137, 137);
        outline: none;
        border-radius: 8px;
        resize: none;
      }
    
      .btn,
      .pop-btn {
        float: right;
        height: 30px;
        margin-right: 28px;
        border-radius: 6px;
        outline: none;
        font-size: 20px;
        padding: 0 20px;
        background: rgb(169, 238, 255);
      }
    
      h3 {
        font-size: 20px;
        color: rgb(102, 102, 102);
        background: rgb(205, 221, 248);
        margin-top: 50px;
        line-height: 50px;
        text-indent: 30px;
        font-weight: 545;
      }
    
      li {
        list-style: none;
        width: 640px;
        font-size: 22px;
        margin: 15px 30所用知识点
    
    //声明一个日期函数
    var date=new Date();
    //分别获取当时的年,月,日,时,分,秒,星期
         var year=date.getFullYear();
         var month=date.getMonth()+1;     在js中,0代表一月
         var day=date.getDate();
         var hour=date.getHours();
         var min=date.getMinutes();
         var sec=date.getSeconds();
         var week=date.getDay();               在js中,星期日为0
    
    setInterval(function(){
            count();
        },1000)
    每隔1000ms执行一次count函数
    
    Dom常用操作
    增:
    document.createElement()	//创建元素
    parent.appendChild() 	//尾部插入
    parent.insertBefore(new,old) 	//从元素前插入
    parent.innerHTML=''
    
    删:
    ele.remove()	//删除自己
    parent.removeChild(Child) 	//删除子元素
    parent.innerHTML=''
    
    查:
    document.getElementById()
    document.getElementsByClassName()
    document.getElementsByName()
    document.getElementsByTagName()
    //以下两种方法支持选择器
    document.querySelector(selector)  	//得到的是满足条件的第一个元素
    document.querySelectorAll() 			//得到的是满足条件的所有集合
    
    修改:
    对内容的修改    表单:     ele.value
                  		 非表单:  ele.innerText=' '  (结果只为文本)
                            	       ele.innerHTML=' ' (结果包含标签)
    
    属性    固有属性(元素对象的属性)  ele.attribute  (ele.src)
                                    			ele[attribute] (ele[attribute])
                两者之间的区别:.后面只能为属性值,不能为字符串
                             		 []内的attribute可以为变量,而.后不可以
                当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用
                    classList得到class的集合,其包含3个属性
                        ele.classList.add();
                        ele.classList.remove();
                        ele.classList.replace(old.new)
            
            自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)
                以下三种方法既可以操作固有属性,又可以操作自定义属性
                ele.getAttribute(属性名)
                ele.setAttribute(属性名.属性值) //本身自带新增功能
                ele.removeAttribute(属性名)
    
    
    disabled 禁用表单元素
    selected 下拉框
    checked 单选,复选框
    以上三种的值全为boolean类型
    
    childern:获取当前元素的所有子元素节点
    parentNode:获取当前元素的父元素节点
    firstElementChild:获取当前元素的第一个子元素节点
    lastElementChild:获取当前元素的最后一个子元素节点
    nextElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)
    previousElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)
    
    nextSibling:获取当前元素的下一个兄弟节点
    previousSibling:获取当前元素的上一个兄弟节点
    
    在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能
    1.每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差
     2.必须事先指定所有事件处理程序而导致的DOM访问次数增多，会延迟整个页面的交互就绪时间
    
      对"事件处理程序过多"问题的解决方案就是事件委托。
      1.可以对未生成的DOM绑定事件
      2.事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
    
    oUl.onclick = function (e) {
        var ev = event || e;
        // 获取事件源
        var target = ev.target;
        // 判断事件源
        if (target.nodeName === 'LI') {   // li
          console.log(target.innerText);
        }
      }
    
    
    解决兼容:
    oList.onclick = function (e) {
        // 获取事件源
        var ev = event || e;
        var target = ev.target || ev.srcElement;
        // 判断事件源
        if (target.nodeName == 'LI') {
          oText.innerHTML = target.innerHTML;
          oList.style.display = 'none';
        }
      }px;
      }
    
      .message-head {
        display: flex;
      }
    
      .message-head .photo {
        width: 70px;
        height: 70px;
        background: rgb(6, 109, 134);
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        overflow: hidden;
      }
    
      .message-head .time {
        margin-left: 12px;
      }
    
      .liuyan,
      .reply p {
        width: 560px;
        line-height: 50px;
        display: block;
        background: rgb(205, 221, 248);
        font-size: 20px;
        margin-left: 80px;
        border-radius: 8px;
        text-indent: 15px;
      }
    
      .delete {
        width: 60px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-left: 580px;
        /* margin-bottom: 0px; */
        border-radius: 6px;
        outline: none;
        font-size: 15px;
        background: rgb(169, 238, 255);
      }
    
      .answer {
        width: 60px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-top: -29px;
        margin-left: 515px;
        border-radius: 6px;
        outline: none;
        font-size: 15px;
        background: rgb(169, 238, 255);
      }
    
      .popup {
        width: 100vw;
        height: 100vh;
        position: fixed;
        background: rgba(0, 0, 0, .3);
        left: 0;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
      }
    
      .pop-content {
        width: 700px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        padding-bottom: 20px;
      }
    
      .reply p {
        margin-top: 10px;
        background: rgba(100, 100, 100, .1);
      }
    </style>
    
    <body>
      <div class="bacground">
        <div class="head">留言板</div>
        <input class="name" type="text" placeholder="请输入您的昵称">
        <textarea class="content" placeholder="请保持言论文明......"></textarea>
        <button class="btn">留言</button>
        <h3>大家在说</h3>
        <ul class="text">
          <li>
            <div class="message-head">
              <span class="photo">系统</span>
              <p class="time">2019-9-27 0:47:38</p>
            </div>
            <p class="liuyan">测试留言</p>
            <div class="reply">
              <p>测试回复</p>
            </div>
            <button class="delete">Delete</button>
            <button class="answer">Answer</button>
          </li>
        </ul>
      </div>
      <div class="popup">
        <div class="pop-content">
          <div class="pop-head">回复板</div>
          <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
          <button class="pop-btn">回复</button>
        </div>
      </div>
    </body>
    <script>
    
      var oList = document.querySelector('.text');
      var oName = document.querySelector('.name');
      var oContent = document.querySelector('.content');
      var oSend = document.querySelector('.btn');
      var oPopup = document.querySelector('.popup');
      var oPopReply = document.querySelector('.pop-reply');
      var parent;
    
      //在文档上获取点击事件,方便各个按钮的获取
      document.onclick = function (e) {
        //解决浏览器的兼容问题
        var ev = event || e;
        var target = ev.target || ev.srcElement;
        //判断点击的按钮的类名是否为delete(删除)
        if (target.className == 'delete') {
            //若是,则其父节点删除
          target.parentNode.remove();
        }
        //判断点击的按钮的类名是否为btn留言
        if (target.className == 'btn') { 
            //获取留言的昵称
          var nickname = oName.value;
            //获取留言的内容
          var content = oContent.value;
            //创建并添加新标签
          createMessage(nickname, content);
        }
        //判断点击的按钮的类名是否为answer回复
        if (target.className == 'answer') {
        //回复板出现
          oPopup.style.display = 'flex';
          //记录该标签的父节点
          parent = target.parentNode;
        }
         //判断点击的按钮的类名是否为pop-btn回复板的回复按钮
        if (target.className == 'pop-btn') {
         //获取在回复板中输入的内容
          var content = oPopReply.value;
         //创建并添加新标签
          createReply(content);
        }
        //判断点击的按钮的类名是否为popup回复板外围
        if (target.className == 'popup') {
        //使回复板隐藏
          oPopup.style.display = 'none';
        //将回复板的内容清空
          oPopReply.value = '';
        }
    
      }
    
     
      function createReply(content) {
        //创建一个p标签
        var oP = document.createElement('p');
        //将填入的内容存入该标签
        oP.innerHTML = content;
        //找到该父节点下的类名为reply的标签,添加子节点
        parent.querySelector('.reply').appendChild(oP);
        //将回复板的内容清空
        oPopReply.value = '';
        //使回复板隐藏
        oPopup.style.display = 'none';
      }
    
    
      function createMessage(nickname, content) {
        //如果留言内容为空
        if (!content) {
          alert('请输入内容后留言');
          return;
        }
        //创建新的li标签
        var oLi = document.createElement('li');
        //获取当前的时间
        var date = new Date();
        //在当前新创建的内容中加入加内容
        oLi.innerHTML = `
          <div class="message-head">
            <span class="photo">${nickname}</span>
            <p class="time">${forMatDate(date)}</p>
          </div>
          <p class="liuyan">${content}</p>
          <div class="reply">
          </div>
          <button class="delete">Delete</button>
          <button class="answer">Answer</button>
        `
          //在ul后添加此标签
        oList.appendChild(oLi);
          //将留言版的内容清空
        oContent.value = '';
          //禁用留言按钮
        oSend.disabled = true;
          //计时
        var count = 10;
          //显示计时
        oSend.innerHTML = count + 's后可留言';
          //调用定时器,每隔一秒减一
        var timer = setInterval(function () {
          count--;
          //如果时间到0,停止定时器,禁用取消
          if (count <= 0) {
            clearInterval(timer);
            oSend.disabled = false;
            oSend.innerHTML = '留言';
          } else {
            oSend.innerHTML = count + 's后可留言';
          }
        }, 1000)
    
      }
    
    //将时间按照想要的格式输出
      function forMatDate(date) {
        //获取年,月,日,时,分,秒
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
    
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    </script>
    
    </html>