使用html、css、js编写一个博客页面,网页最上方有一个发布博客的输入框,点击提交按钮后,可以获取用户输入的博文内容并显示在页面上。每条博文的下方有一个点赞按钮和一个评论按钮,点击点赞按钮后,按钮显示为已赞,点击评论按钮后,页面显示出输入框,点击提交按钮后,将评论内容显示在博文下方。
时间: 2023-05-19 22:03:06 浏览: 119
好的,这是一个典型的前端开发问题。您可以使用HTML、CSS和JavaScript来实现这个博客页面。首先,您需要创建一个HTML页面,包括一个发布博客的输入框和一个博文列表。然后,您可以使用JavaScript来获取用户输入的博文内容,并将其添加到博文列表中。对于每个博文,您可以添加一个点赞按钮和一个评论按钮,使用JavaScript来处理这些按钮的点击事件。当用户点击点赞按钮时,您可以使用JavaScript来更新按钮的状态并将点赞数加1。当用户点击评论按钮时,您可以显示一个评论输入框,并使用JavaScript将评论内容添加到博文下方。这是一个简单的实现,您可以根据需要进行修改和扩展。
相关问题
使用html+css+javaScript来编写一个点击按钮,出现黑色半透明遮罩,上面有输入框组的操作
可以使用以下代码来实现你的需求:
HTML:
```html
<button id="showOverlay">点击显示遮罩</button>
<div id="overlay" class="overlay">
<div class="overlay-content">
<input type="text" placeholder="输入框1">
<input type="text" placeholder="输入框2">
<!-- 添加更多输入框组 -->
</div>
</div>
```
CSS:
```css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
display: none;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
button {
margin-top: 20px;
}
```
JavaScript:
```javascript
document.getElementById("showOverlay").addEventListener("click", function() {
var overlay = document.getElementById("overlay");
overlay.style.display = "block";
});
document.addEventListener("click", function(event) {
var overlay = document.getElementById("overlay");
if (event.target === overlay) {
overlay.style.display = "none";
}
});
```
这段代码会创建一个按钮,点击按钮后会显示一个黑色半透明的遮罩,并在遮罩上方显示输入框组。当点击遮罩区域时,遮罩会隐藏起来。
注意:为了方便起见,这里只显示了两个输入框,你可以根据需要添加更多输入框组。
用CSS和JavaScript在页面最下端增加一个提交建议输入框并在提交后出现一个弹窗显示“感谢您的建议”
好的,下面是一个简单的示例,演示如何使用CSS和JavaScript在页面最下方添加提交建议输入框,并在提交后出现一个弹窗显示“感谢您的建议”:
HTML代码:
```
<div class="feedback-form">
<h3>提交建议</h3>
<form>
<label for="feedback">请告诉我们您的建议:</label>
<textarea id="feedback" name="feedback"></textarea>
<button type="submit">提交</button>
</form>
</div>
```
CSS代码(用于定位和样式化表单):
```
.feedback-form {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 20px;
}
.feedback-form h3 {
margin-top: 0;
}
.feedback-form form {
display: flex;
flex-direction: column;
}
.feedback-form label {
margin-bottom: 10px;
}
.feedback-form textarea {
height: 100px;
margin-bottom: 10px;
}
.feedback-form button {
align-self: flex-end;
}
```
JavaScript代码(用于显示感谢您的建议弹窗):
```
// 获取表单元素
const form = document.querySelector('.feedback-form form');
// 添加提交事件监听器
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表单默认提交行为
// 获取反馈文本框元素
const feedbackInput = document.querySelector('#feedback');
// 获取反馈内容
const feedbackText = feedbackInput.value;
// 将反馈内容提交到后端(这里用console.log()代替)
console.log(`提交的反馈内容为:${feedbackText}`);
// 显示感谢您的建议弹窗
alert('感谢您的建议!');
});
```
这是一个基本的示例,您可以根据自己的需要进行修改和扩展。