Article directory
Practical case: confession wall
Use some basic knowledge in CSS, HTML and JS to design a simple confession wall. The CSS style is relatively simple. Interested students can use their imagination to modify it. The content sent by the confession wall will be generated below in the form of a div tag.
Note: The data on the confession wall is not persistent and can only be saved in the current web page. Once the page is refreshed or closed, the data here will be gone. If you want to save the data for a long time, you can submit the data to the server, and then the server will store the data in a file or database. But this article introduces knowledge related to JS front-end, database or other knowledge is not expanded here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<!-- 设置标题-->
<h1> 表白墙</h1>
<p>输入后点击提交，会将信息显示在墙上</p>
<div class="row">
<span>谁</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>对谁</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>说什么</span>
<input type="text" class="edit">
</div>
<div>
<input type="button" value="提 交" id="submit">
</div>
<!-- 每次点击提交，都会在下面新增一个row,里面放置用户输入的话-->
</div>
<script>
let submitButton=document.querySelector('#submit');
submitButton.onclick=function () {
//1.先获取到输入框中的内容
let edits=document.querySelectorAll('.edit');
let from=edits[0].value;
let to=edits[1].value;
let message=edits[2].value;
console.log(from+"对"+to+"说"+message);
if(from =='' || to=='' || message==''){
//对用户输入做一个简单的校验，验证当前输入是否是合法的提交
return;
}
//2.根据内容构造 HTML 元素 (.row 里面包含用户输入的话);
let row=document.createElement('div');
row.className = 'row';
row.innerHTML=from+' 对 '+to+' 说 '+message;
//3.把这个新的元素添加到Dom树上
let container=document.querySelector('.container');
container.appendChild(row);
//4.清空原来的输入框
for(let i=0;i<edits.length;i++){
edits[i].value='';
}
}
</script>
<style>
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 400px;
margin: 0 auto;
}
h1{
text-align: center;
padding: 20px 0;
color:red;
}
p{
text-align: center;
color:#666;
padding: 10px 0;
font-size: 14px;
}
.row{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
span{
width: 90px ;
font-size: 20px;
color: black;
}
input{
width: 310px;
height: 40px;
}
#submit{
width: 400px;
color: white;
background-color: orange;
border: none;
border-radius: 14px;
font-size: 18px;
}
#submit:active{
background-color: blue;
}
.edit{
font-size: 18px;
padding-left: 5px;
}
</style>
</body>
</html>
running result:
memorandum
Effect picture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>备忘录</title>
</head>
<body>
<!--创建输入框和新建任务按钮-->
<div class="nav">
<input type="text">
<button>新建任务</button>
</div>
<!-- 下面包含了左右两个内容区域 -->
<div class="container">
<!-- 左侧结构 -->
<div class="todo">
<h3>未完成</h3>
<!-- 举例子 -->
<!-- <div class="row">-->
<!-- <input type="checkbox">-->
<!-- <span>吃饭</span>-->
<!-- <button>删除</button>-->
<!-- </div>-->
</div>
<!-- 右侧结构 -->
<div class="done">
<h3>已完成</h3>
</div>
</div>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.nav{
/*background-color: red;*/
width:800px;
height:100px;
margin: 0 auto;
display: flex;
align-items: center;
}
/* 任务的输入框*/
.nav input{
height: 50px;
width: 600px;
}
.nav button{
height: 50px;
width: 200px;
background-color: orange;
border-radius: 5px;
color:black;
/*//border: none;*/
}
.container{
background-color: orange;
width:800px;
height: 800px;
margin: 0 auto;
display: flex;
}
.container h3{
height: 50px;
text-align: center;
line-height: 50px;
background-color: #333;
color:white;
}
.todo{
background-color: darkgray;
width: 400px;
height: 100%;
}
.done{
/*background-color: blue;*/
width:50%;
height: 100%;
}
.row{
height: 50px;
display: flex;
align-items: center;
}
.row input{
/*设置上下外边距为0 左右外边距为10px*/
margin:0 10px;
}
.row span{
width:300px;
}
.row button{
width:50px;
height:40px;
}
</style>
<script>
//实现新建任务功能
//1.获取新增按钮
let addTaskButton=document.querySelector('.nav button');
//2.给新增按钮注册一个点击事件
addTaskButton.onclick=function () {
//3.获取输入框中的内容
let input=document.querySelector('.nav input');
let taskContent=input.value;
if(taskContent==''){
console.log('当前任务为空，无法新增任务！');
return ;
}
//1.4 根据任务内容创建元素（类似于上面的div）
let row=document.createElement('div');
row.className='row';
let checkbox=document.createElement('input');
checkbox.type='checkbox';
let span=document.createElement('span');
span.innerHTML=taskContent;
let button=document.createElement('button');
button.innerHTML='删除';
//将上面创建的对象挂到DOM树上
row.appendChild(checkbox);
row.appendChild(span);
row.appendChild(button);
let todo=document.querySelector('.todo');
todo.appendChild(row);
//清空输入框
input.value='';
//实现 已完成功能，针对 checkbox 新增一个点击事件处理函数
checkbox.onclick=function () {
// row对象 是创建出的选项
// 根据row的状态判断是否加入完成事件中。
if(checkbox.checked){
//选中状态，把row放到done里面
let target=document.querySelector('.done');
target.appendChild(row);
}else{
//未选中状态 把row放入todo
let target=document.querySelector('.todo');
target.appendChild(row);
}
}
//实现删除功能
//针对删除按钮增加一个点击事件
button.onclick=function () {
let parent=row.parentNode;
parent.removeChild(row);
}
}
</script>
</body>
</html>
The function of the above code is to generate an HTML fragment directly from JS.
running result:
