以上代码添加评论功能并显示

好的，以下是一个完整的实现方法。

HTML代码：

<div class="comment-section">
  <div class="comment-header">
    <span class="comment-title" onmouseover="showComments('comments')">评论</span>
    <span class="host-comment" onmouseover="showComments('host-comments')">楼主评论</span>
  </div>
  <div class="comment-body" id="comments">
    <!--评论内容-->
    <div class="comment">
      <div class="comment-header">
        <span class="comment-author">小明</span>
        <span class="comment-time">2022-05-01 12:00</span>
      </div>
      <div class="comment-content">
        这篇文章写得非常好，我学到了很多东西！
      </div>
    </div>
    <!--更多评论...-->
    <div class="comment-more">
      <a href="#">查看更多评论</a>
    </div>
  </div>
  <div class="comment-body" id="host-comments" style="display: none;">
    <!--楼主评论内容-->
    <div class="comment">
      <div class="comment-header">
        <span class="comment-author">楼主</span>
        <span class="comment-time">2022-05-02 10:00</span>
      </div>
      <div class="comment-content">
        感谢您的支持，希望能够为您提供更多有用的信息！
      </div>
    </div>
  </div>
  <div class="comment-form">
    <div class="form-group">
      <label for="comment-author">昵称：</label>
      <input type="text" id="comment-author" name="author">
    </div>
    <div class="form-group">
      <label for="comment-content">评论：</label>
      <textarea id="comment-content" name="content"></textarea>
    </div>
    <button class="btn-comment" onclick="addComment()">提交评论</button>
  </div>
</div>

CSS代码：

.comment-section {
  margin: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.comment-title:hover,
.host-comment:hover {
  cursor: pointer;
  color: #333;
  text-decoration: underline;
}

.comment-body {
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 10px;
}

.comment {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #999;
}

.comment-author {
  font-weight: bold;
}

.comment-time {
  margin-left: 10px;
}

.comment-content {
  margin-top: 10px;
}

.comment-more {
  text-align: center;
  margin-top: 10px;
}

.comment-more a {
  color: #999;
  text-decoration: none;
}

.comment-more a:hover {
  color: #333;
}

.comment-form {
  margin-top: 20px;
}

.form-group {
  display: flex;
  margin-bottom: 10px;
}

.form-group label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.form-group input,
.form-group textarea {
  flex: 1;
}

.btn-comment {
  display: block;
  margin: 20px auto 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #999;
  color: #333;
  cursor: pointer;
  border-radius: 3px;
}

.btn-comment:hover {
  background-color: #f5f5f5;
}

JS代码：

// 显示评论或楼主评论
function showComments(commentType) {
  var comments = document.getElementById('comments');
  var hostComments = document.getElementById('host-comments');
  if(commentType === 'comments') {
    comments.style.display = 'block';
    hostComments.style.display = 'none';
  } else {
    comments.style.display = 'none';
    hostComments.style.display = 'block';
  }
}

// 添加评论
function addComment() {
  var author = document.getElementById('comment-author').value.trim();
  var content = document.getElementById('comment-content').value.trim();
  if(author == '') {
    alert('请输入昵称！');
    return;
  }
  if(content == '') {
    alert('请输入评论内容！');
    return;
  }
  var comment = document.createElement('div');
  comment.className = 'comment';
  var header = document.createElement('div');
  header.className = 'comment-header';
  var authorSpan = document.createElement('span');
  authorSpan.className = 'comment-author';
  authorSpan.innerText = author;
  var timeSpan = document.createElement('span');
  timeSpan.className = 'comment-time';
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  timeSpan.innerText = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
  header.appendChild(authorSpan);
  header.appendChild(timeSpan);
  var contentDiv = document.createElement('div');
  contentDiv.className = 'comment-content';
  contentDiv.innerText = content;
  comment.appendChild(header);
  comment.appendChild(contentDiv);
  var commentBody = document.getElementById('comments');
  commentBody.insertBefore(comment, commentBody.lastElementChild);
  document.getElementById('comment-author').value = '';
  document.getElementById('comment-content').value = '';
}

解释一下代码：

在HTML中，我们添加了一个评论表单，包括昵称和评论内容，并且在最后添加了一个“提交评论”的按钮。

在CSS中，我们添加了一些样式来美化评论区的样式。

在JS中，我们定义了两个函数：showComments和addComment。

showComments函数和之前的一样，用来显示评论内容或楼主评论内容。

addComment函数用来添加评论，具体实现如下：

1. 首先获取昵称和评论内容的值，并进行一些简单的判断，如果没有输入昵称或评论内容，则弹出提示框并返回。

2. 创建一个新的评论节点，包括评论头和评论内容，并设置相应的类名。

3. 将昵称和评论内容插入到评论头中。评论时间使用当前时间，通过Date对象获取。

4. 将评论头和评论内容插入到评论节点中。

5. 将评论节点插入到评论内容的倒数第二个节点之前，即“查看更多评论”的节点之前。

6. 清空昵称和评论内容的输入框。

至此，我们完成了评论区的实现，包括显示评论和楼主评论、添加评论等功能。