以下是一个简单的许愿墙模板,适用于网页设计与制作:

html
/* 样式设置 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
text-align: center;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
width: 300px;
border: 1px solid #ccc;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
.wish {
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
border: 1px solid #ccc;
text-align: left;
}
// 获取表单和愿望列表
var form = document.getElementById('wishForm');
var wishInput = document.getElementById('wishInput');
var wishList = document.getElementById('wishList');
// 创建一个空数组来存储愿望
var wishes = [];
// 添加提交表单的事件监听器
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
// 获取输入的愿望
var wish = wishInput.value;
// 将愿望添加到愿望数组中
wishes.push(wish);
// 清空输入框
wishInput.value = '';
// 更新愿望列表
updateWishList();
});
// 更新愿望列表的函数
function updateWishList() {
// 清空旧的愿望列表
wishList.innerHTML = '';
// 循环遍历愿望数组,创建愿望元素并添加到列表中
for (var i = 0; i < wishes.length; i++) {
var wish = wishes[i];
var wishElement = document.createElement('div');
wishElement.className = 'wish';
wishElement.innerText = wish;
wishList.appendChild(wishElement);
}
}
这个模板包括一个输入框和一个提交按钮,用于用户输入自己的愿望。当用户点击提交按钮时,愿望将会被添加到一个愿望数组中,并更新愿望列表显示在页面上。每个愿望都被渲染为一个`div`元素,并应用了一些简单的样式。你可以根据需要自定义样式和功能。

查看详情

查看详情