HMTL许愿墙系统代码
时间: 2024-02-07 20:02:48 浏览: 113
许愿墙源代码000.0
HTML许愿墙系统是一个简单的Web应用程序,允许用户在页面上发布和查看许愿。以下是一个基本的HTML许愿墙系统代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>许愿墙</title>
<style>
.wish {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>许愿墙</h1>
<form id="wishForm">
<input type="text" id="wishInput" placeholder="输入你的愿望">
<button type="submit">发布</button>
</form>
<div id="wishList"></div>
<script>
// 许愿墙数据
var wishes = [];
// 获取表单和许愿列表元素
var form = document.getElementById('wishForm');
var wishInput = document.getElementById('wishInput');
var wishList = document.getElementById('wishList');
// 监听表单提交事件
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var wishText = wishInput.value.trim(); // 获取输入的愿望文本
if (wishText !== '') {
wishes.push(wishText); // 将愿望添加到数组中
// 创建愿望元素并添加到许愿列表中
var wishElement = document.createElement('div');
wishElement.classList.add('wish');
wishElement.textContent = wishText;
wishList.appendChild(wishElement);
wishInput.value = ''; // 清空输入框
}
});
</script>
</body>
</html>
```
这段代码创建了一个简单的许愿墙系统。用户可以在输入框中输入愿望,点击发布按钮后,愿望将会显示在许愿列表中。
阅读全文