JS的一个小练习
展示成果
话不多说
html骨架
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项(toDoList)title>
<link rel="stylesheet" href="Demo.css">
<script src="./Common.js">script>
<script src="./Demo.js">script>
head>
<body>
<div class="container">
<header><img src="./title.svg" alt=""><p class="header">待办事项列表p>header>
<div class="txt">
<input type="text" id="txt" placeholder="添加今日待办事项~~">
<button id="btnAdd">添加button>
div>
<div class="liList">
<span class="ev">~今天我需要~span>
<ul id="ul">
ul>
div>
<div class="select">
<p id="count">今日还剩下0个p>
<button id="all">allbutton>
<button id="Active">未完成button>
<button id="Complete">已完成button>
<button id="CompleteClear">清楚已完成待办button>
div>
div>
body>
html>
css样式
@font-face {
font-family: myFont;
src: url(/字体/01223131/今年也要加油鸭-三极字库.ttf);
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
}
*:focus{
outline: none;
}
html{
font-family: myFont;
font-size: 18px;
}
body{
display: flex;
background-image: linear-gradient(90deg,#ffafbd,#ffc3a0);
background-repeat: no-repeat;
min-height: 100vh;
}
li{
list-style: none;
}
.container{
display: flex;
flex-direction: column;
padding: 1rem;
margin: 7rem auto;
background-color: #fff;
width: 27rem;
border-radius: 10px;
box-shadow: 4px 5px 15px 0px #999;
justify-content: space-between;
align-self: flex-start;
}
header{
display: flex;
justify-content: flex-start;
}
header>img{
width: 80px;
height: 60px;
margin-left: 5rem;
transform: rotate(-3deg);
}
.header{
width: 161px;
height: 40px;
font-size: 1.3rem;
padding: .25em .8em .15em;
border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
background-color: #fe7345;
text-align: center;
line-height: 30px;
transform: rotate(3deg);
margin-top: 10px;
color: #fff;
}
.txt{
margin-top: 2rem;
display: flex;
justify-content: space-around;
}
#txt{
width: 18rem;
height: 2rem;
font-size: 1rem;
border: #fe7345 3px dashed;
border-top: none;
border-left: none;
border-right: none;
font-family: myFont;
}
#btnAdd{
width: 100px;
background-color:orange;
border-radius: 47% 42% 17% 24%/28% 39% 52% 43%;
border: none;
transform: rotate(10deg);
transition:all .5s cubic-bezier(.175,.885,.32,1.275);
color: #fff;
font-family: myFont;
}
#btnAdd:hover{
box-shadow: 4px 5px 5px 0px #999;
}
.ev{
font-size: 1.2rem;
display: block;
text-align: left;
margin: .5rem auto;
}
.liList{
margin-top: 1rem;
}
#ul{
padding: 1rem;
border: 1px dashed #eee;
border-radius: 10px;
}
#ul>li{
display: flex;
margin-top: 1rem;
line-height: 2rem;
justify-content: space-between;
border-radius: 5px;
padding: 5px;
}
#ul>li:first-child{
margin-top: 0px;
}
#ul>li>div{
display: flex;
}
#ul>li>div>p{
margin-left: .5rem;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow:ellipsis;
}
.btnRemove{
height: 1.5rem;
width: 1.5rem;
border: none;
margin-top: .3rem;
background-color: transparent;
transition: all .3s 0ms;
}
.btnRemove:hover{
background-color: rgba(225, 225, 225, 0.5);
backdrop-filter: blur(4px) saturate(150%);
border-radius: 1.5rem;
}
.select{
display: flex;
}
.select>p{
font-size: .8rem;
margin-top: .7rem;
}
.select>button{
background-color: #fe7345;
border: none;
border-radius: 5px;
margin-left: 15px;
min-width: 30px;
font-size: 1rem;
margin-top: .5rem;
font-size: .9rem;
padding: 3px;
color: white;
font-family: myFont;
}
.done{
text-decoration:line-through;
}
.selectItem{
background-color: #fe7345;
color: white;
}
.hidden{
display: none !important;
}
.animate{
animation: animate .75s ease-in-out both;
}
@keyframes animate {
0%{
transform:rotateX(90deg);
opacity: 0;
}
40%{
transform:rotateX(-10deg);
}
70%{
transform:rotateX(10deg);
}
100%{
transform:rotateX(0deg);
opacity: 1;
}
}
原生js
Common.js
function $Id(id) { return document.getElementById(id); } function $cls(clsName){ return document.getElementsByClassName(clsName); } function $tag(tagName){ return document.getElementsByTagName(tagName); } function $(clsName) { return document.querySelectorAll(clsName); } function $one(clsOne) { return document.querySelector(clsOne); }
Demo.js
(function (win) { win.addEventListener('load', () => { $one('#btnAdd').addEventListener('mousedown', () => { $one('#btnAdd').style.transform = 'rotate(0deg)'; if ($one('#txt').value.length > 0) { //获取ul var ul = $one('#ul'); //创建li var li = document.createElement('li'); //创建包含复选框和span的div var liCls = document.createElement('div'); //创建input元素 var checkBox = document.createElement('input'); //创建span显示复选框内容 var p = document.createElement('p'); //创建删除按钮 var btnRemove = document.createElement('button'); //删除按钮添加样式类名 btnRemove.classList.add('btnRemove'); btnRemove.innerText = 'X'; //指定input的类型 checkBox.type = 'checkBox'; //获取文本框内容，并赋值给复选框 checkBox.value = $one('#txt').value; //赋值给span元素 p.innerText = checkBox.value; //添加到包含元素 liCls.appendChild(checkBox); liCls.appendChild(p); li.appendChild(liCls); li.appendChild(btnRemove); ul.appendChild(li); //清空文本框 $one('#txt').value = ''; checkBox.addEventListener('click', () => { checkBox.nextSibling.classList.toggle('done'); if (checkBox.checked) { li.classList.add('selectItem'); btnRemove.classList.add('selectItem'); } else { li.classList.remove('selectItem'); btnRemove.classList.remove('selectItem'); } checkBox.parentNode.parentNode.classList.toggle('animate'); CompleteCount(); }); p.addEventListener('mousedown', () => { if (p.previousSibling.checked) { p.previousSibling.checked = false; } else { p.previousSibling.checked = true; } li.classList.toggle('selectItem'); btnRemove.classList.toggle('selectItem'); checkBox.nextSibling.classList.toggle('done'); checkBox.parentNode.parentNode.classList.toggle('animate'); CompleteCount(); }); btnRemove.addEventListener('click', () => { li.remove(); CompleteCount(); }); CompleteCount(); } CompleteCount(); }); $one('#btnAdd').addEventListener('mouseup', () => { $one('#btnAdd').style.transform = 'rotate(10deg)'; }); $one('#btnAdd').addEventListener('mouseleave', () => { $one('#btnAdd').style.transform = 'rotate(10deg)'; }); $one('#all').addEventListener('click', () => { for (const li of $('#ul>li>div>p')) { li.parentNode.parentNode.classList.remove('hidden'); } }); $one('#Active').addEventListener('click', () => { for (const li of $('#ul>li>div>p')) { if (!li.classList.contains('done')) { li.parentNode.parentNode.classList.remove('hidden'); count++; } else { li.parentNode.parentNode.classList.add('hidden'); count--; } } }); $one('#Complete').addEventListener('click', () => { for (const li of $('#ul>li>div>p')) { if (!li.classList.contains('done')) { li.parentNode.parentNode.classList.add('hidden'); } else { li.parentNode.parentNode.classList.remove('hidden'); } } }); $one('#CompleteClear').addEventListener('click', () => { for (const li of $('#ul>li>div>p')) { if (li.classList.contains('done')) { li.parentNode.parentNode.remove(); } } }); function CompleteCount() { var num = 0; for (const li of $('#ul>li>div>p')) { if (!li.classList.contains('done')) { num++; } } $one('#count').innerText = `今日还剩下${num}个`; } }); })(window);
转载请声明本文地址https://www.cnblogs.com/snail-wn/articles/16578307.html