js仿toDoList(待办事项）练习
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">all</button>
<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
js仿toDoList(待办事项）练习的更多相关文章
- todolist待办事项
使用html/css原生js实现待办事项列表: 支持添加待办事项,删除待办事项,切换待办事项的状态(正在进行,已经完成) 支持对正在进行以及已经完成事项编辑(单击内容即可编辑) 源代码:链接:http ...
- 基于html实现一个todolist待办事项
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- vue todolist待办事项完整
<template> <div id="app"> <input type="text" v-model='todo' @keyd ...
- vue2.* 事件结合双向数据绑定、模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化 06
ceshi.vue <template> <div id="app"> <input type='text' v-model='todo' @keyd ...
- Vue 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中
<template> <div id="app"> <input type="text" v-model='todo' @keyd ...
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中，键盘事件
<template> <div id="app"> <h1>{{ msg }}</h1> <input type=" ...
- jQuery模仿ToDoList实现简单的待办事项列表
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数 ...
- Javascript之网页版待办事项
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能. 其中页面的HTML布局和CSS样式取用原站,JS部分为自己编写. 效果图 完整代码 HTML.JS部分 < ...
- 使用vue实现简单的待办事项
待办事项 效果图 目录结构 详细代码 AddNew.vue <template> <div> <input v-model="content"/> ...
随机推荐
- 浅析 2D 组态与 2.5D 组态的区别 | 空调装配生产线与化工安全流程
前言 为了更有效辨别 2D 与 2.5D 之间的区别,图扑软件选用 2D 空调装配生产线与 2.5D 化工厂安全流程作比较.通过自主研发的 HT 产品,采用 B/S 架构快速搭建零代码拖拽式 Web ...
- flink 流的合并
flink 流的合并操作 union union只能合并类型相同的数据,合并的结果仍然是DataStream,结果操作与未合并之前一致. public static void main(String[ ...
- QT工程构建目录下，将生成的中间文件和可执行文件分离
在QT工程中,当我们选择了构建目录后,编译生成程序后,总会发现在debug目录下会有混淆着各类文件,如下图 很多时候,我们又仅仅只需要可执行文件或者自定义的动态链接库.如下图 当然,如果不觉得麻烦,有 ...
- bat-配置环境变量
查看环境变量 set 查看当前所有变量 set path 查看变量path的值 echo %xxx% 查看某一个环境变量 临时设置环境变量 set xxx=xxx set xxx= 永久设置环境变量 ...
- Maven配置【详细】
参考网址:https://www.jianshu.com/p/f2f52a062d5b
- NC14662 小咪买东西
NC14662 小咪买东西 题目 题目描述 小咪是一个土豪手办狂魔,这次他去了一家店,发现了好多好多( \(n\) 个)手办,但他是一个很怪的人,每次只想买 \(k\) 个手办,而且他要让他花的每一分 ...
- 面向个性化需求的在线云数据库混合调优系统 | SIGMOD 2022入选论文解读
SIGMOD 数据管理国际会议是数据库领域具有最高学术地位的国际性会议,位列数据库方向顶级会议之首.近日,腾讯云数据库团队的最新研究成果入选 SIGMOD 2022 Research Full Pap ...
- 一文搞懂 Netty 发送数据全流程 | 你想知道的细节全在这里
欢迎关注公众号:bin的技术小屋,如果大家在看文章的时候发现图片加载不了,可以到公众号查看原文 本系列Netty源码解析文章基于 4.1.56.Final版本 在<Netty如何高效接收网络数据 ...
- 如何准备论文线上Presentation视频录制教程（Summary of Video Recording）
0:前言 由于国外的疫情严重,目前大多数学术会议都是线上举办,因此往往需要制作presentation的视频录制.由于各种软件横飞,有的需要会员并且不熟悉操作,特别浪费时间.因此,我将这次的操作和遇到 ...
- C++ delete后的指针在不同编译器下的状态差异
今天看到小伙伴分享的一个问题,小伙伴用的MSVC2019编译器,在对delete后的指针进行取值操作时触发了访问冲突. #include<iostream> using namespace ...