基于JavaScript实现交互式博客

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <title>交互式博客文章</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <article>  
        <h1>我的博客标题</h1>  
        <p>这是一篇博客文章的内容...</p>  
        <footer>  
            <button id="likeBtn">点赞</button>  
            <span id="likeCount">0</span> 个赞  
            <div id="comments">  
                <!-- 评论将会动态添加到这里 -->  
            </div>  
            <form id="commentForm">  
                <input type="text" id="commentInput" placeholder="添加评论...">  
                <button type="submit">提交</button>  
            </form>  
        </footer>  
    </article>  
  
    <script src="script.js"></script>  
</body>  
</html>

/* styles.css */  
body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 20px;  
}  
  
article {  
    max-width: 600px;  
    margin: 0 auto;  
    background-color: #f9f9f9;  
    padding: 20px;  
    border-radius: 5px;  
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
}  
  
footer {  
    display: flex;  
    flex-direction: column;  
    align-items: flex-start;  
    margin-top: 20px;  
}  
  
button {  
    background-color: #4CAF50;  
    color: white;  
    padding: 8px 16px;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
    margin-bottom: 10px;  
}  
  
button:hover {  
    background-color: #45a049;  
}  
  
#likeCount {  
    margin-left: 10px;  
}  
  
#comments {  
    margin-top: 20px;  
}  
  
form {  
    display: flex;  
    margin-top: 10px;  
}  
  
input[type="text"] {  
    padding: 8px;  
    border-radius: 4px;  
    border: 1px solid #ddd;  
    flex-grow: 1;  
    margin-right: 10px;  
}

// script.js  
document.addEventListener('DOMContentLoaded', function() {  
    const likeBtn = document.getElementById('likeBtn');  
    const likeCount = document.getElementById('likeCount');  
    const commentsContainer = document.getElementById('comments');  
    const commentForm = document.getElementById('commentForm');  
    const commentInput = document.getElementById('commentInput');  
  
    let likeCounter = 0; // 点赞计数器  
  
    // 点赞功能  
    likeBtn.addEventListener('click', function() {  
        likeCounter++;  
        likeCount.textContent = likeCounter;  
    });  
  
    // 提交评论功能  
    commentForm.addEventListener('submit', function(e) {  
        e.preventDefault(); // 阻止表单默认提交行为  
  
        const commentText = commentInput.value.trim();  
        if (commentText) {  
            const commentElement = document.createElement('div');  
            commentElement.textContent = commentText;  
            commentsContainer.appendChild(commentElement);  
  
            // 清空输入框  
            commentInput.value = '';  
  
            // 可选：添加一些样式或额外信息到评论元素  
            commentElement.style.marginBottom = '10px';  
            const commentDate = document.createElement

const dateElement = document.createElement('span');  
            dateElement.textContent = new Date().toLocaleString();  
            commentElement.appendChild(dateElement);  
        }  
    });  
});