ホームページ >ウェブフロントエンド >jsチュートリアル >ネイティブ js は、コメントを送信し、コメントの効果を表示するメソッドを実装します (コード例)
ネイティブ js は、コメントを送信し、コメントの効果を表示するメソッドを実装します (コード例)
- 青灯夜游転載
- 2018-10-25 15:20:323185ブラウズ
この記事の内容は、ネイティブjsでコメントを投稿しコメントの効果を表示する方法（コード例）を紹介するものです。困っている友人は参考にしていただければ幸いです。
<!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>レンダリング:
以上がネイティブ js は、コメントを送信し、コメントの効果を表示するメソッドを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。