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
Sharing tips on using scroll bars in HTML
Today, when we were learning about the Niu Nan new...
Example of how to create and run multiple MySQL containers in Docker
1. Use the mysql/mysql-server:latest image to qui...
Detailed explanation of how to quickly operate MySQL database in nodejs environment
GitHub address: https://github.com/dmhsq/dmhsq-my...
Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation
Table of contents Phenomenon Root Cause Analysis ...
vmware workstation12 installation centos prompts VMware Player and Device/Credential Guard are incompatible, reasons and solutions
In the latest version of WIN10, Microsoft introdu...
Steps to change mysql character set to UTF8 under Linux system
Table of contents 1. Check the MySQL status in th...
Deploy Varnish cache proxy server based on Centos7
1. Varnish Overview 1. Introduction to Varnish Va...
Detailed explanation of how to adjust Linux command history
The bash history command in Linux system helps to...
MySQL optimization: how to write high-quality SQL statements
Preface There are a lot of information and method...
Thoroughly understand JavaScript prototype and prototype chain
Table of contents Preface Laying the foundation p...
Vue implements paging function
This article example shares the specific code of ...
What knowledge systems do web designers need?
Product designers face complex and large manufactu...
MySQL sql_mode analysis and setting explanation
When inserting a set of data into the MySQL datab...
How to implement distributed transactions in MySQL XA
Table of contents Preface XA Protocol How to impl...
Detailed explanation of the difference between docker-compose ports and expose
There are two ways to expose container ports in d...