JS实现类似sina微博评论回复功能,主要是点击回复时候在对应的评论下弹出...

发布网友发布时间：2022-04-29 04:38

共2个回答

懂视网时间：2022-04-22 17:42

本篇文章给大家带来的内容是介绍原生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>

效果图：

热心网友时间：2022-04-22 14:50

新建一个层加入到点击评论的地方