帮我写一段代码,使用html、css、js编写一个博客页面,网页最上方有一个发布博客的输入框,点击提交按钮后,可以获取用户输入的博文内容并显示在页面上。每条博文的下方有一个点赞按钮和一个评论按钮,点击点赞按钮后,按钮显示为已赞,点击评论按钮后,页面显示出输入框,点击提交按钮后,将评论内容显示在博文下方。
时间: 2023-05-19 21:03:09 浏览: 50
好的,以下是代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>博客页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>我的博客</h1>
<form id="blog-form">
<input type="text" id="blog-input" placeholder="输入博客内容">
<button type="submit">发布</button>
</form>
</header>
<main>
<div id="blog-list"></div>
</main>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin: 0;
}
form {
display: flex;
margin-top: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px 0 0 5px;
}
button[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
main {
padding: 20px;
}
.blog {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
.blog p {
margin: 0;
}
.like-btn {
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.like-btn.liked {
background-color: #ccc;
}
.comment-btn {
background-color: #2196F3;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}
.comment-form {
margin-top: 10px;
}
.comment-form input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px 0 0 5px;
}
.comment-form button[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
```
JS:
```js
const blogForm = document.getElementById('blog-form');
const blogInput = document.getElementById('blog-input');
const blogList = document.getElementById('blog-list');
let blogs = [];
blogForm.addEventListener('submit', e => {
e.preventDefault();
const blogContent = blogInput.value;
if (blogContent.trim() === '') {
alert('请输入博客内容');
return;
}
const blog = {
content: blogContent,
likes: 0,
comments: []
};
blogs.push(blog);
renderBlogs();
blogInput.value = '';
});
function renderBlogs() {
blogList.innerHTML = '';
blogs.forEach((blog, index) => {
const blogEl = document.createElement('div');
blogEl.classList.add('blog');
blogEl.innerHTML = `
<p>${blog.content}</p>
<button class="like-btn${blog.likes > 0 ? ' liked' : ''}" data-index="${index}">${blog.likes > 0 ? `已赞(${blog.likes})` : '赞'}</button>
<button class="comment-btn" data-index="${index}">评论</button>
`;
const commentForm = document.createElement('form');
commentForm.classList.add('comment-form');
commentForm.dataset.index = index;
commentForm.innerHTML = `
<input type="text" placeholder="输入评论内容">
<button type="submit">提交</button>
`;
blog.comments.forEach(comment => {
const commentEl = document.createElement('p');
commentEl.textContent = comment;
blogEl.appendChild(commentEl);
});
blogEl.appendChild(commentForm);
blogList.appendChild(blogEl);
});
}
blogList.addEventListener('click', e => {
if (e.target.classList.contains('like-btn')) {
const index = e.target.dataset.index;
blogs[index].likes++;
renderBlogs();
} else if (e.target.classList.contains('comment-btn')) {
const index = e.target.dataset.index;
const commentForm = blogList.querySelector(`.comment-form[data-index="${index}"]`);
commentForm.classList.toggle('show');
} else if (e.target.type === 'submit') {
e.preventDefault();
const index = e.target.parentNode.dataset.index;
const commentInput = e.target.parentNode.querySelector('input[type="text"]');
const commentContent = commentInput.value;
if (commentContent.trim() === '') {
alert('请输入评论内容');
return;
}
blogs[index].comments.push(commentContent);
renderBlogs();
commentInput.value = '';
}
});
renderBlogs();
```
希望这个示例能够帮到你!