Flash
/
craftmarts


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html>
<head>
  <title>评论组件</title>
  <style>
    /* 样式 */
    .comment-container {
      max-width: 500px;
      margin: 0 auto;
    }

    .comment {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      position: relative;
    }

    .comment .author {
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .comment .author img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .comment .actions {
      position: absolute;
      bottom: 5px;
      right: 5px;
      display: flex;
      align-items: center;
    }

    .comment .actions button {
      padding: 5px 10px;
      margin-right: 5px;
    }

    .comment .like-count,
    .comment .reply-count {
      font-size: 0.8em;
      color: #888;
      margin-left: 5px;
    }

    .comment .timestamp {
      font-size: 0.8em;
      color: #888;
    }

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

    .comment-form textarea {
      width: 100%;
      height: 80px;
      margin-bottom: 10px;
    }

    .comment-form button {
      padding: 5px 10px;
    }

    .comment-form.reply-form {
      margin-left: 30px;
    }
  </style>
</head>
<body>
  <div class="comment-container">
    <h2>评论</h2>
    <div id="comments"></div>
    <form class="comment-form">
      <textarea id="comment-input" placeholder="请输入评论内容"></textarea>
      <button type="button" onclick="addComment()">发表评论</button>
    </form>
  </div>

  <script>
    // JavaScript
    function addComment() {
      var commentInput = document.getElementById("comment-input");
      var commentContent = commentInput.value.trim();

      if (commentContent !== "") {
        var comment = document.createElement("div");
        comment.className = "comment";

        var author = document.createElement("div");
        author.className = "author";
        var avatar = document.createElement("img");
        avatar.src = "../img/profile photo.png"; // 替换为实际的头像图片路径
        var authorName = document.createElement("span");
        authorName.textContent = "匿名用户";
        author.appendChild(avatar);
        author.appendChild(authorName);

        var actions = document.createElement("div");
        actions.className = "actions";
        var likeButton = document.createElement("button");
        likeButton.textContent = "点赞";
        likeButton.addEventListener("click", incrementLikeCount);
        var likeCount = document.createElement("span");
        likeCount.className = "like-count";
        likeCount.textContent = "0";
        actions.appendChild(likeButton);
        actions.appendChild(likeCount);

        var replyButton = document.createElement("button");
        replyButton.textContent = "回复";
        replyButton.addEventListener("click", toggleReplyForm);
        var replyCount = document.createElement("span");
        replyCount.className = "reply-count";
        replyCount.textContent = "0";
        actions.appendChild(replyButton);
        actions.appendChild(replyCount);

        var timestamp = document.createElement("div");
        timestamp.className = "timestamp";
        timestamp.textContent = new Date().toLocaleString();

        var content = document.createElement("div");
        content.className = "content";
        content.textContent = commentContent;

        var replyForm = document.createElement("form");
        replyForm.className = "comment-form reply-form hidden";
        var replyTextarea = document.createElement("textarea");
        replyTextarea.placeholder = "请输入回复内容";
        var replyButton = document.createElement("button");
        replyButton.type = "button";
        replyButton.textContent = "回复";
        replyButton.addEventListener("click", addReply);
        replyForm.appendChild(replyTextarea);
        replyForm.appendChild(replyButton);

        comment.appendChild(author);
        comment.appendChild(actions);
        comment.appendChild(timestamp);
        comment.appendChild(content);
        comment.appendChild(replyForm);

        var commentsContainer = document.getElementById("comments");
        commentsContainer.appendChild(comment);

        commentInput.value = "";
      }
    }

    function incrementLikeCount(event) {
      var likeCountElement = event.target.nextElementSibling;
      var currentCount = parseInt(likeCountElement.textContent);
      likeCountElement.textContent = currentCount + 1;
    }

    function toggleReplyForm(event) {
      var comment = event.target.closest(".comment");
      var replyForm = comment.querySelector(".reply-form");
      replyForm.classList.toggle("hidden");
    }

    function addReply(event) {
      var replyTextarea = event.target.previousElementSibling;
      var replyContent = replyTextarea.value.trim();

      if (replyContent !== "") {
        var reply = document.createElement("div");
        reply.className = "comment";

        var author = document.createElement("div");
        author.className = "author";
        var avatar = document.createElement("img");
        avatar.src = "../img/profile photo.png"; // 替换为实际的头像图片路径
        var authorName = document.createElement("span");
        authorName.textContent = "匿名用户";
        author.appendChild(avatar);
        author.appendChild(authorName);

        var actions = document.createElement("div");
        actions.className = "actions";
        var likeButton = document.createElement("button");
        likeButton.textContent = "点赞";
        likeButton.addEventListener("click", incrementLikeCount);
        var likeCount = document.createElement("span");
        likeCount.className = "like-count";
        likeCount.textContent = "0";
        actions.appendChild(likeButton);
        actions.appendChild(likeCount);

        var timestamp = document.createElement("div");
        timestamp.className = "timestamp";
        timestamp.textContent = new Date().toLocaleString();

        var content = document.createElement("div");
        content.className = "content";
        content.textContent = replyContent;

        reply.appendChild(author);
        reply.appendChild(actions);
        reply.appendChild(timestamp);
        reply.appendChild(content);

        var comment = event.target.closest(".comment");
        var replyForm = comment.querySelector(".reply-form");
        comment.insertBefore(reply, replyForm);

        var replyCountElement = comment.querySelector(".reply-count");
        var currentCount = parseInt(replyCountElement.textContent);
        replyCountElement.textContent = currentCount + 1;

        replyTextarea.value = "";
        replyForm.classList.add("hidden");
      }
    }
  </script>
</body>
</html>