當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript用事件委托实现留言板功能

發(fā)布時間：2024/3/12 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript用事件委托实现留言板功能小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

用事件委托實現(xiàn)留言板功能。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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 30px;}.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;/* height: 76px; */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> </head><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"></ul></div><div class="popup"><div class="pop-content"><div class="pop-head">回復(fù)板</div><textarea class="pop-reply" placeholder="請保持言論文明......"></textarea><button class="pop-btn huiFu">回復(fù)</button><button class="pop-btn quXiao">取消</button></div></div><script>//在事件委托中，每一個if都相當(dāng)于一個獨立的函數(shù)，因為每一次點擊都會重新觸發(fā)事件處理函數(shù)var oAns ;//分析：事件委托給誰？ --- 共同的父元素document.onclick = function (e) {//事件處理對象，兼容IE8及以下版本的瀏覽器e = e || event ;// target目標(biāo) --- 具體是由哪個標(biāo)簽觸發(fā)的var target = e.target ;//留言if(target.className === 'btn'){//獲取對象var nickname = $('.name').value ;var content = $('.content').value ;//判斷輸入是否為空if(nickname && content){//創(chuàng)建一個標(biāo)簽var oLi = document.createElement('li') ;//插入新內(nèi)容oLi.innerHTML = `<div class="message-head"><span class="photo">${nickname}</span><p class="time">2019-9-27 0:47:38</p></div><p class="liuyan">${content}</p><div class="reply"></div><button class="delete">Delete</button><button class="answer">Answer</button>` //將最新的留言插入到最上面$('.text').insertBefore(oLi , $('.text').firstChild) ;//倒計時clock(target , 3) ;//留言完后清空留言板內(nèi)容$('.content').value = '' ;}else{alert('輸入不能為空！')}return}//刪除if(target.className === 'delete'){//刪除留言target.parentNode.remove() ;return}//回復(fù)if(target.className === 'answer'){//顯示彈窗$('.popup').style.display = 'flex' ;//找到回復(fù)留言的地方oAns = target.previousElementSibling.previousElementSibling ;return }//確認回復(fù)if(target.className === 'pop-btn huiFu'){//拿到回復(fù)的內(nèi)容var huiFuContent = $('.pop-reply').value ;if(huiFuContent){//創(chuàng)建一個標(biāo)簽var oP = document.createElement('p') ;//將內(nèi)容插入標(biāo)簽中oP.innerHTML = huiFuContent ;//將回復(fù)插入到留言的地方oAns.appendChild(oP) ;}//關(guān)閉彈窗$('.popup').style.display = 'none' ;return}//取消回復(fù)if(target.className === 'pop-btn quXiao'){$('.popup').style.display = 'none' ;return}}//倒計時function clock(ele , time){if(!ele.disabled){ele.disabled = true ;ele.innerHTML = time + 's后可再次留言' ;var t = setInterval(function () {time-- ;ele.innerHTML = time + 's后可再次留言' ;if(time <= 0){clearInterval(t) ;ele.disabled = false ;ele.innerHTML = '留言' ;}},1000)}}//獲取對象function $(selector){return document.querySelector(selector) ;}</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的JavaScript用事件委托实现留言板功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：中华田园犬发展史
下一篇： gradle idea java ssm