一篇文章告訴你如何用事件委托實現(xiàn)JavaScript留言板功能
更新時間：2021年12月27日 09:53:33 作者：小高今天早睡了嗎？
這篇文章主要為大家介紹了事件委托實現(xiàn)JavaScript留言板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
用事件委托實現(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">
<!-- <li>
<div class="message-head">
<span class="photo">系統(tǒng)</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">測試留言</p>
<div class="reply">
<p>測試回復(fù)</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">回復(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都相當于一個獨立的函數(shù)，因為每一次點擊都會重新觸發(fā)事件處理函數(shù)
var oAns ;
//分析：事件委托給誰？ --- 共同的父元素
document.onclick = function (e) {
//事件處理對象，兼容IE8及以下版本的瀏覽器
e = e || event ;
// target目標 --- 具體是由哪個標簽觸發(fā)的
var target = e.target ;
//留言
if(target.className === 'btn'){
//獲取對象
var nickname = $('.name').value ;
var content = $('.content').value ;
//判斷輸入是否為空
if(nickname && content){
//創(chuàng)建一個標簽
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)建一個標簽
var oP = document.createElement('p') ;
//將內(nèi)容插入標簽中
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é)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript實現(xiàn)基礎(chǔ)排序算法的示例詳解
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)基礎(chǔ)排序算法，如：冒泡排序、選擇排序、插入排序和快速排序，感興趣的可以了解一下2022-06-06
這篇文章主要為大家詳細介紹了js自定義彈框插件的簡單封裝，自己封裝一個彈框插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07 
箭頭函數(shù)是和我們工作密切相關(guān)的東西，本文主要介紹了js中什么時候不能使用箭頭函數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06 
這篇文章主要為大家介紹了前端跨域瀏覽器設(shè)置解決前端跨域問題的方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07 
這篇文章主要介紹了如何進行微信公眾號開發(fā)的本地調(diào)試的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06 
這篇文章主要介紹了JS數(shù)組reduce()方法原理及使用技巧解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-07-07 
這篇文章主要介紹了如何在微信小程序中存setStorage,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-12-12 
rollup是一款用來es6模塊打包代碼的構(gòu)建工具(支持css和js打包)。這篇文章主要介紹了Rollup處理并打包JS文件項目實例,需要的朋友可以參考下
2018-05-05 
在使用了母板頁面的項目中 使用js獲取其中的標簽id
需要先加載到本地看看他在瀏覽時候的頁面源代碼然后確定他的id
2010-04-04