<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JS待办事项列表添加删除代码 - 站长素材</title>
<style>
* {
box-sizing: border-box;
font-family: sans-serif, Courier, monospace;
}
body {
margin: 0;
display: flex;
justify-content: center;
background: #303134;
color: white;
height: 100vh;
width: 100%;
}
body h2 {
font-size: 80px;
color: #4285f4;
margin: 60px;
text-transform: uppercase;
}
.all {
width: 100%;
position: relative;
display: flex;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
/* now to the list shit */
}
.all .inout {
display: flex;
justify-content: center;
flex-direction: row;
}
.all .inout #text,
.all .inout button {
padding: 5px 10px;
height: 50px;
font-size: 18px;
border: none;
}
.all .inout #text {
width: 80%;
border-radius: 5px 0 0 5px;
}
.all .inout button {
width: 20%;
background: #1a73e8;
border-radius: 0 5px 5px 0;
color: white;
cursor: pointer;
}
.all .list ul {
list-style: none;
padding: 0;
}
.all .list ul li {
width: 100%;
background: white;
color: #303134;
margin: 0;
padding: 20px;
border: 1px solid #303134;
border-radius: 5px;
}
.all .list ul li span {
padding: 10px;
margin: 5px;
background: #eee;
border-radius: 3px;
color: white;
display: inline-block;
float: right;
margin-top: -10px;
cursor: pointer;
}
.all .list ul li span.first {
background: #ffac13;
}
.all .list ul li span.second {
background: #b11717;
}
</style>
</head>
<body>
<header>
<h2 class="head">待办事项工具</h2>
<div class="all">
<div class="inout">
<input type="text" name="item" id="text" placeholder="添加您的事项">
<button>添加</button>
</div>
<div class="list">
<ul>
</ul>
</div>
</div>
</header>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
var text = document.querySelector('input');
btn.onclick = function(){
if(text.value == ''){
alert('请输入待办事项');
}else{
var li = document.createElement('li');
li.innerHTML = text.value + "<span class='fin'> 完成</span>" + "<span class='del'>删除</span>";
ul.insertBefore(li,ul.children[k++]);
var fin = document.querySelector('.fin');
var del = document.querySelector('.del');
del.className = 'second';
fin.className = 'first';
fin.onclick = function(){
this.parentNode.style.backgroundColor = 'green';
}
del.onclick = function(){
}
}
}
</script>
</body>
</html>
