案例-表白墙简单实现
文章目录
效果展示
初始画面
提交内容后画面（按键按下）
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.total {
width: 400px;
margin: 0px auto; /*上下、左右*/
}
h1 {
text-align: center;
padding-bottom: 30px;
}
p {
text-align: center;
color: gray;
}
.div1 {
display: flex;
justify-content: center; /*水平方向*/
align-items: center; /*垂直方向*/
padding-top: 5px;
}
span {
width: 80px;
height: 30px;
}
#edit {
width: 200px;
height: 30px;
}
.submit {
width: 280px;
height: 30px;
background-color: rgba(248, 236, 7, 0.942);
border: none;
border-radius: 5px;
}
.submit:active{
background-color: grey;
}
</style>
<body>
<div class="total">
<h1>表白墙</h1>
<p>输入后请点击提交，会将信息显示在表格中</p>
<div class="div1">
<span>谁：</span><input id="edit" class="who" type="text">
</div>
<div class="div1">
<span>对谁：</span><input id="edit" class="ofwho" type="text">
</div>
<div class="div1">
<span>说什么</span><input id="edit" class="what" type="text">
</div>
<div class="div1">
<input class="submit" type="button" value="提交" onclick="submit()">
</div>
</div>
</body>
<script>
function submit(){
let containDiv = document.querySelectorAll('#edit')
console.dir(containDiv)
let from = containDiv[0].value
let to = containDiv[1].value
let message = containDiv[2].value
console.log(from+'对'+to+'说'+message)
// 创建div
let nodeDiv = document.createElement('div')
nodeDiv.className = 'div1'
nodeDiv.innerHTML = from+'对'+to+'说'+message
console.log(nodeDiv)
// 尾插div
let nodeparent = document.querySelector('.total')
nodeparent.appendChild(nodeDiv)
}
</script>
</html>
原文地址：https://blog.csdn.net/Dingyuan0/article/details/142706002
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！