This article tells you how to use event delegation to implement JavaScript message board function
|
Use event delegation to implement message board functionality.
<!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);
}
.background {
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="background">
<div class="head">Message Board</div>
<input class="name" type="text" placeholder="Please enter your nickname">
<textarea class="content" placeholder="Please keep your speech civilized..."></textarea>
<button class="btn">Leave a message</button>
<h3>What people are saying</h3>
<ul class="text">
<!-- <li>
<div class="message-head">
<span class="photo">System</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">Test message</p>
<div class="reply">
<p>Test reply</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">Reply Board</div>
<textarea class="pop-reply" placeholder="Please keep your speech civilized..."></textarea>
<button class="pop-btn huiFu">Reply</button>
<button class="pop-btn quXiao">Cancel</button>
</div>
</div>
<script>
//In event delegation, each if is equivalent to an independent function, because each click will re-trigger the event processing function var oAns;
//Analysis: To whom is the event delegated? --- Common parent element document.onclick = function (e) {
//Event processing object, compatible with IE8 and below versions of browsers e = e || event;
// target target --- which tag triggers it var target = e.target;
//Leave a message if(target.className === 'btn'){
//Get the object var nickname = $('.name').value;
var content = $('.content').value;
//Judge whether the input is empty if(nickname && content){
//Create a tag var oLi = document.createElement('li');
//Insert new content 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>
`
//Insert the latest message to the top $('.text').insertBefore(oLi , $('.text').firstChild);
//Countdown clock(target, 3);
// Clear the message board content after leaving a message $('.content').value = '';
}else{
alert('Input cannot be empty!')
}
return
}
//deleteif(target.className === 'delete'){
//Delete the messagetarget.parentNode.remove();
return
}
//Reply if(target.className === 'answer'){
//Show popup window$('.popup').style.display = 'flex';
//Find the place to reply to the message oAns = target.previousElementSibling.previousElementSibling;
return
}
//Confirm reply if(target.className === 'pop-btn huiFu'){
//Get the reply content var huiFuContent = $('.pop-reply').value;
if(huiFuContent){
//Create a tag var oP = document.createElement('p');
//Insert content into the tag oP.innerHTML = huiFuContent;
//Insert the reply into the message place oAns.appendChild(oP);
}
//Close the popup window$('.popup').style.display = 'none';
return
}
//Cancel replyif(target.className === 'pop-btn quXiao'){
$('.popup').style.display = 'none';
return
}
}
//Countdown function clock(ele , time){
if(!ele.disabled){
ele.disabled = true ;
ele.innerHTML = time + 'You can leave a message again after s';
var t = setInterval(function () {
time-- ;
ele.innerHTML = time + 'You can leave a message again after s';
if(time <= 0){
clearInterval(t) ;
ele.disabled = false ;
ele.innerHTML = 'Message';
}
},1000)
}
}
//Get the object function $(selector){
return document.querySelector(selector);
}
</script>
</body>
</html>
SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: Detailed explanation of process management in Linux system
>>: The meaning of the 5 types of spaces in HTML
Recommend
JavaScript prototype and prototype chain details
Table of contents 1. prototype (explicit prototyp...
Axios cancels repeated requests
Table of contents Preface 1. How to cancel a requ...
Detailed explanation of pure SQL statement method based on JPQL
JPQL stands for Java Persistence Query Language. ...
Summary of uncommon js operation operators
Table of contents 2. Comma operator 3. JavaScript...
Detailed tutorial on installing the jenkins container in a docker environment
Recommended Docker learning materials: https://ww...
The difference and usage of Vue2 and Vue3 brother component communication bus
Table of contents vue2.x vue3.x tiny-emitter plug...
MySQL data insertion optimization method concurrent_insert
When a thread executes a DELAYED statement for a ...
CSS margin overlap and how to prevent it
The vertically adjacent edges of two or more bloc...
Understanding of web design layout
<br />A contradiction arises. In small works...
How to install MySQL server community version MySQL 5.7.22 winx64 in win10
Download: http://dev.mysql.com/downloads/mysql/ U...
MySQL table field time setting default value
Application Scenario In the data table, the appli...
How to use domestic image warehouse for Docker
1. Problem description Due to some reasons, the d...
Solution for Docker Swarm external verification load balancing not taking effect
Problem Description I created three virtual machi...
Detailed process of configuring NIS in Centos7
Table of contents principle Network environment p...
Detailed explanation of how to deploy and install the Chinese version of Redash in Docker
1. Installation Instructions Compared with local ...