实现的一个网页版的表白墙
实现效果
代码截图
相关代码
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<P>输入相关信息，点击提交后将会展示在表格中</P>
<div class="div1">
<span>谁：</span><input type="text" class="edit">
</div>
<div class="div1">
<span>对谁：</span><input type="text" class="edit">
</div>
<div class="div1">
<span>说：</span><input type="text" class="edit">
</div>
<div class="div1">
<input type="button" value="提交" class="submit" onclick="Submit()">
</div>
</div>
</body>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
width: 400px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 20px;
margin-top: 40px;
}
p {
text-align: center;
color: gray;
line-height: 63px;
}
.div1 {
display: flex;
justify-content: center;
align-items: center;
}
.edit {
margin-bottom: 20px;
width: 200px;
height: 30px;
}
span {
width: 50px;
margin-bottom: 20px;
}
.submit {
background-color: rgb(255, 136, 0);
color: white;
width: 254px;
height: 40px;
border: none;
border-radius: 5px;
}
.submit:active {
background-color: gray;
}
</style>
<script>
function Submit() {
let edits = document.querySelectorAll('.edit')
let from = edits[0].value
let to = edits[1].value
let message = edits[2].value
if(from == "" || to == "" || message == "") {
return
}
let div = document.createElement('div')
div.className = 'div1'
div.innerHTML = from + " 对 " + to + "说：" + message
let container = document.querySelector('.container')
container.appendChild(div)
for(i = 0; i < edits.length; i++) {
edits[i].value = "";
}
}
</script>
</html>