一个原生JavaScript CSS DEMO
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>任务列表</title>
</head>
<body>
<div id="container">
<header id="top" class="top">
<h1>任务列表</h1>
<p>新任务</p>
<input type="text" id='task' name='task' placeholder="遛狗..."><br><br>
<button onclick='addtask()'>添加任务</button>
</header>
<main class='content'>
<h1 id='task-title'>任务清单</h1>
<ul id="ul-d">
<li>学习HTML<span onclick='del(this)'>x</span></li>
<li>学习CSS<span onclick='del(this)'>x</span></li>
<li>学习JavaScript<span onclick='del(this)'>x</span></li>
<li>学习VUE<span onclick='del(this)'>x</span></li>
<li>学习SASS<span onclick='del(this)'>x</span></li>
</ul>
<a href="javascript:void(0)" onclick="clearAll(this)" class="clearAll">清除任务</a>
</main>
<footer>
<h1>Copyright ©2019</h1>
</footer>
</div>
<script src="./index.js"></script>
</body>
</html>
/* index.js */
var liCount = document.getElementsByTagName('li').length;
function showOrHied(liCount) {
if (liCount > 0) {
document.querySelector('.clearAll').style.display = '';
document.querySelector('#task-title').style.display = '';
} else {
document.querySelector('.clearAll').style.display = 'none';
document.querySelector('#task-title').style.display = 'none';
}
}
function addtask() {
//获取表单中的值
let dask = document.querySelector('#task').value;
if (dask == null || dask === undefined || '' == dask) {
console.warn('dask is not null');
return;
}
//创建元素
const li = document.createElement('li');
//添加文本
li.appendChild(document.createTextNode(dask));
//创建span标签
const span = document.createElement('span');
span.setAttribute('onclick', 'del(this)');
span.appendChild(document.createTextNode('x'));
li.appendChild(span);
//将 li 放入 ul中
document.querySelector('ul#ul-d').appendChild(li);
console.log(li);
document.querySelector('#task').value = '';
liCount++;
showOrHied(liCount);
}
function del(event) {
console.log(event.parentElement);
event.parentElement.remove();
liCount--;
showOrHied(liCount);
}
function clearAll(e) {
val = document.getElementById('ul-d');
val.innerHTML = '';
liCount = 0;
showOrHied(liCount);
}
/* index.css */
* {
margin: 0px;
padding: 0px;
}
#container {
background: white;
width: 90vw;
margin: 0.3rem auto;
border: 1px solid #eee;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
background: url('https://images.pexels.com/photos/2070241/pexels-photo-2070241.jpeg?cs=srgb&dl=chain-link-fence-fence-growth-2070241.jpg&fm=jpg') no-repeat center center/cover;
}
.top {
width: 95%;
margin: 10px auto;
color: #999999;
}
.top h1 {
font-size: 20px;
padding: 10px;
}
.top p {
font-size: 16px;
padding: 10px;
}
#task {
background: rgba(238, 238, 238, 0.7);
margin-left: 10px;
width: 90%;
height: 3rem;
font-size: 1rem;
border: none;
}
.top button {
background: rgba(102, 102, 102, 0.1);
border: none;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}
.top button:hover {
color: yellowgreen;
background: gray;
}
.content {
width: 95%;
margin-top: 20px;
margin: 10px auto;
color: #333;
}
.content h1 {
font-size: 20px;
padding: 10px;
margin-top: 10px;
}
.content ul {
list-style: none;
padding: 10px;
}
.content ul li {
padding: 10px;
border: solid 1px #ddd;
height: 2rem;
line-height: 2rem;
margin-top: 0.1rem;
}
.content ul li span {
font-size: 30px;
margin-right: 2rem;
color: #FF3399;
float: right;
}
.clearAll {
text-decoration: none;
display: inline-block;
background: rgba(102, 102, 102, 0.1);
color: #333;
border: none;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 20px 10px;
}
.clearAll:hover {
color: yellowgreen;
background: gray;
}
footer {
/* background: #EEEEEE; */
background: rgba(238, 238, 238, 0.7);
color: #999999;
width: 95%;
margin: 1rem auto;
}
footer h1 {
font-size: 1rem;
padding: 1rem;
margin: auto;
text-align: center;
}