Home > Article > Web Front-end > Native js implements methods to submit comments and display the effects of comments (code example)
Native js implements methods to submit comments and display the effects of comments (code example)
- 青灯夜游forward
- 2018-10-25 15:20:323181browse
The content of this article is to introduce the method of submitting comments and displaying the effect of comments in native js (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#box{
width: 900px;
margin: 0 auto;
}
#text{
width: 900px;
height: 400px;
margin: 0 auto;
background-color: #fbe1c8;
margin-top: 60px;
outline: none;
border-radius: 8px;
border:2px solid #e59a56;
overflow: hidden;
}
#tup{
float: right;
display: block;
margin-top: 10px;
margin-left: 20px;
width: 60px;
height: 36px;
background-color: #e69b57;
font-size: 18px;
line-height: 36px;
border-radius: 6px;
text-align: center;
color: #ffffff;
cursor:pointer;
}
#wad{
margin-top: 60px;
width: 880px;
}
#wad p{
font-size: 18px;
line-height: 24px;
border-bottom: 1px dashed #e69b57;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="box">
<div id="text" contenteditable="true"></div>
<span id="tup">提交</span>
<div id="wad"></div>
</div>
<script>
let Text = document.getElementById('text'),
Tup = document.getElementById("tup"),
Pl = document.getElementById("wad");
Tup.onclick = function(){
Li = "<p>" + Text.innerHTML + "</p>";
Text.innerHTML = "";
Pl.innerHTML += Li ;
}
</script>
</body>
</html>Rendering:
The above is the detailed content of Native js implements methods to submit comments and display the effects of comments (code example). For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete