Idea:
Message function: click message - > get nickname and message content - > judge whether the input is empty - > message is successful if there is input-
>Leave a message again after 10s
1. Get element {function $(selector) {return document.querySelector(selector)}
2. Binding click event (click to leave a message)
2.1 ， clear the first and last spaces of nickname and content ， var username = oname value. trim()
2.2. Judge that the input is not empty. If (username = = = '' ||||||||||||||= '') {alert ('the input cannot be empty ')
return }
2.3} dynamically generate reply using template string
2.31 get Li var oli = document createElement('li') ;
2.32 put the template string into {oli innerHTML = ` `
2.33 add the generated reply to the document {otext appendChild(oLi)
2.34 message success
2.4} use function throttling to achieve the click effect again after 10s
2.41 ■ disable button
2.42 ， start counting ， var count = 6 ， the word on the page button is
oBtn. InnerHTML = count + 'you can leave a message again after's'
2.43 set timer count per second -- write obtn again innerHTML
2.44 if it is judged that if the time runs out, the timer will be cleared and the button will open obtn InnerHTML = 'message'
Delete function: click Delete to delete the message (the delete function must be available after the message, so write
(in the binding event of the message)
2.5 get all delete buttons
var oDels = document.querySelectorAll('.delete')
2.6} loop binding event: when the delete button is clicked, the parent element (i.e. li) is deleted
for(var i = 0 ; i < oDels.length ;i++){
oDels[i].onclick = function () {
this.parentNode.remove()
}
}
Reply function: click reply to reply under the message, and you can choose to cancel the reply
2.7 get all reply buttons
var oAnswers = document.querySelectorAll('.answer')
2.8 cyclic binding event. When the reply button is clicked
for(var i = 0 ; i < oAnswers.length ; i++){ oAnswers[i].onclick = function () {}
2.81 display pop-up window
$('.popup').style.display = 'flex';
2.82 confirm which message is replied (otherwise, all replies will be replied on the first reply)
var ans = this.previousElementSibling.previousElementSibling ;
Use the tag sibling element to find
Cancel function
2.83 bind click event and click Cancel to close the pop-up window
$('.popup').style.display = 'none';
Reply
2.84 binding reply button click event
2.85 give the value of the reply box to huiFuContent
2.86 if judgment (huiFuContent), var oP = create p element, put huiFuContent
Put it on the oP.innerHTML of the page, and insert the sub element ans.appendChild(oP) under ANS
2.87 the reply ends and the pop-up window disappears
$('.popup').style.display = 'none'
css code
<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 {
margin-top:10px ;
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 {
margin-top:10px ;
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>
html
<div class="bacground">
<div class="head">Message Board</div>
<input class="name" type="text" placeholder="Enter nickname ">
<textarea class="content" placeholder="Please keep your speech civilized......"></textarea>
<button class="btn">Leaving a message.</button>
<h3>People are saying</h3>
<ul class="text">
<li>
</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 quXiao">cancel</button>
<button class="pop-btn huiFu">reply</button>
</div>
</div>js code
var oName = document.querySelector('.name')
var oContent = document.querySelector('.content')
var oBtn = document.querySelector('.btn')
var oText = document.querySelector('.text')
// var oBtn = $('.btn')
function $(selector) {
return document.querySelector(selector)
}
// Leaving a message.
oBtn.onclick = function() {
var username = oName.value.trim()
var content = oContent.value.trim()
// //Judge nickname
// if(username.length === 0){
// alert('nickname cannot be empty ')
// return
// }
// if(username && content){
// } else {
// alert('input cannot be empty ')
// }
if(username === '' || content === ''){
alert('Input cannot be empty')
return
}
var oLi = document.createElement('li') ;
oLi.innerHTML = `
<div class="message-head">
<span class="photo">${username}</span>
<p class="time">${formatDate()}</p>
</div>
<p class="liuyan">${content}</p>
<div class="reply">
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
`
oText.appendChild(oLi)
oBtn.disabled = true
var count = 6
oBtn.innerHTML = count + 's Then you can leave a message again'
var t =setInterval(function(){
count--
oBtn.innerHTML = count + 's Then you can leave a message again'
if(count <= 0){
clearTimeout(t)
oBtn.disabled = false
oBtn.innerHTML = 'Leaving a message.'
}
},1000)
// Delete must be after the message - only one can be deleted
// $('.delete').onclick = function () {
// this.parentNode.remove()
// }
// Get all the delete buttons and cycle through the binding event
var oDels = document.querySelectorAll('.delete')
for(var i = 0 ; i < oDels.length ;i++){
oDels[i].onclick = function () {
this.parentNode.remove()
}
}
// Reply event
var oAnswers = document.querySelectorAll('.answer')
for(var i = 0 ; i < oAnswers.length ; i++){
oAnswers[i].onclick = function () {
// Display pop-up window
$('.popup').style.display = 'flex';
// When you click reply, you need to determine which message you reply to!!!!
var ans = this.previousElementSibling.previousElementSibling ;
//cancel
$('.quXiao').onclick = function () {
//Close pop-up window
$('.popup').style.display = 'none';
}
//reply
$('.huiFu').onclick = function () {
var huiFuContent = $('.pop-reply').value
if(huiFuContent){
var oP = document.createElement('p')
oP.innerHTML = huiFuContent
ans.appendChild(oP)
}
$('.pop-reply').value = ''
$('.popup').style.display = 'none' ;
}
}
}
$('.name').value = ''
$('.content').value = ''
}
function formatDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if(hour < 10 && hour >= 0){
hour = '0'+ hour
}
if(minute < 10 && minute >= 0){
minute = '0'+ minute
}
if(second < 10 && second >= 0){
second = '0'+ second
}
var arr = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
return year + '-' + month + '-' + day +' ' + hour + ':' + minute + ':' +
second + ' ' + arr[week]
}