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
How to install Composer in Linux
1. Download the installation script - composer-se...
Building FastDFS file system in Docker (multi-image tutorial)
Table of contents About FastDFS 1. Search for ima...
Detailed analysis of mysql MDL metadata lock
Preface: When you execute a SQL statement in MySQ...
10 bad habits to avoid in Docker container applications
There is no doubt that containers have become an ...
JS uses map to integrate double arrays
Table of contents Preface Simulating data Merged ...
MySQL 8.0.22 installation and configuration method graphic tutorial
This article records the installation and configu...
Web Design Tips: Simple Rules for Page Layout
Repetition: Repeat certain page design styles thr...
MySQL database design: detailed explanation of Schema operation method using Python
Before the arrow was shot, the bow whispered to t...
Steps to configure IIS10 under Win10 and support debugging ASP programs
Microsoft IIS IIS (Internet Information Server) i...
Tutorial on building a JMeter+Grafana+influxdb visual performance monitoring platform in docker environment
Table of contents 1. Install Docker 2. Install an...
Detailed explanation of the role and working principle of MySQL master-slave replication
1. What is master-slave replication? Master-slave...
How to simplify Redux with Redux Toolkit
Table of contents Problems Redux Toolkit solves W...
Why MySQL does not recommend using subqueries and joins
To do a paginated query: 1. For MySQL, it is not ...
Some points on using standard HTML codes in web page creation
The most common mistake made by many website desi...
MySQL Basic Tutorial Part 1 MySQL5.7.18 Installation and Connection Tutorial
Starting from this article, a new series of artic...