生活随笔
收集整理的這篇文章主要介紹了
JavaScript用事件委托实现留言板功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用事件委托實現留言板功能。
<!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;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;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">回復板
</div><textarea class="pop-reply" placeholder="請保持言論文明......"></textarea><button class="pop-btn huiFu">回復
</button><button class="pop-btn quXiao">取消
</button></div></div><script>var oAns ;document.onclick = function (e) {e = e || event ;var target = e.target ;if(target.className === 'btn'){var nickname = $('.name').value ;var content = $('.content').value ;if(nickname && content){var oLi = document.createElement('li') ;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) ;$('.content').value = '' ;}else{alert('輸入不能為空！')}return}if(target.className === 'delete'){target.parentNode.remove() ;return}if(target.className === 'answer'){$('.popup').style.display = 'flex' ;oAns = target.previousElementSibling.previousElementSibling ;return }if(target.className === 'pop-btn huiFu'){var huiFuContent = $('.pop-reply').value ;if(huiFuContent){var oP = document.createElement('p') ;oP.innerHTML = huiFuContent ;oAns.appendChild(oP) ;}$('.popup').style.display = 'none' ;return}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>
總結
以上是生活随笔為你收集整理的JavaScript用事件委托实现留言板功能的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
