JS + HTML + CSS 实现Todolist
文章目录
-
目录
文章目录
前言
一、效果展示
二、代码
1.HTML
2.CSS
2.JS
前言
最近初学js，用js实现了一个Todolist页面。在一些方面还存在着很多的不足。屏幕上的阿狸和背景的云朵都是会动的，音乐播放器也可以播放音乐。需要图片资源的可以私信我。
实现功能：
- Todolist的基本功能
- 任务进度影响下方按钮，下方按钮也能筛选任务进程
- 添加了一个音乐播放器（可以拖动，靠近屏幕右侧时，会收缩进去）
- 背景云朵和阿狸可以移动
- 定时时间截止后，阿狸将提醒定时事项
提示：以下是本篇文章正文内容，下面案例可供参考
一、效果展示
视频展示：
Todolist展示
二、代码
1.HTML
代码如下（示例）：
Todos App
To-Do List
~Today I need to~
Congrat, you have no more tasks to do
提示
2.CSS
代码如下（示例）：
*,
::after,
::before {
margin: 0;
padding: 0;
font-family: "Yanone Kaffeesatz", sans-serif;
box-sizing: border-box;
}
html {
color: #494a4b;
line-height: 1.5;
}
body {
padding: 50px 0;
/* 铺满屏幕 */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(#e66465, #9198e5);
background-repeat: no-repeat;
overflow-x: hidden;
}
.container {
padding: 30px 40px 20px;
text-align: center;
width: 440px;
max-width: 100%;
margin: 0 auto;
border-radius: 15px;
display: flex;
/* 设置主轴方向，从上到下 */
flex-direction: column;
background: #f2f2f2;
}
.heading {
display: flex;
align-items: center;
justify-content: center;
height: 88px;
position: relative;
}
.heading .img-wrapper img {
width: 80px;
height: 80px;
/* 保持原有比例，多余会被裁剪 */
}
.heading .title {
transform: rotate(3deg);
font-size: 21px;
padding: 0.25em 0.8em 0.15em;
border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
color: #fff;
background: #fe7345;
}
.form-field {
margin-top: 25px;
}
.title {
font-size: 22px;
margin-bottom: 18px;
}
.form-input {
display: inline-block;
flex-grow: 0.65;
margin-right: 15px;
}
.form-input input {
border: none;
width: 100%;
border-bottom: 3px dashed #fe7345;
padding: 5px 0 3px;
font-size: 15px;
background: transparent;
outline: none;
}
.form-wrapper {
display: flex;
justify-content: center;
}
.submit-btn {
cursor: pointer;
border: none;
position: relative;
transform: rotate(4deg);
border-radius: 6px;
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.submit-btn:active{
transform: translateY(4px);
padding-bottom: 0;
}
.submit-btn1::before {
position: absolute;
left: 0;
top: 0;
content: "";
width: 100%;
height: 100%;
/* 竖直缩放 */
transform: scaleY(1.1);
border: 1px solid #494a4b;
border-radius: inherit;
transform-origin: top;
background-image: url(data:image/png;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==);
background-color: #fe7345;
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.submit-btn span {
position: relative;
display: block;
padding: 0.34em 0.84em;
border: 2px solid #494a4b;
border-radius: inherit;
background-color: #fff;
}
.empty-todos {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
gap: 10px;
animation: enter 0.45s ease-in-out;
}
@keyframes enter {
0% {
opacity: 0;
transform: scale(0.75);
}
50%{
transform: scale(1.15);
}
100%{
opacity: 1;
transform: scale(1);
}
}
.empty-todos .msg{
font-size: 17px;
padding-top: 5px;
color: rgba(73, 74, 75, .45);
}
.empty-todos .svg{
color: rgba(73, 74, 75, .45);
overflow: visible;
width: 0.75em;
font-size: inherit;
}
.todo-list{
margin-top: 40px;
width: 100%;
}
.todo-list .todo-item{
display: flex;
align-items: center;
padding: 8px 10px 8px 0;
margin-bottom: 10px;
position: relative;
}
.todo-list .todo-text{
text-align: left;
width: 300px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.todo-item1 {
color: #fff;
}
.left-icon{
margin: 0 8px;
padding: 5px;
/* border-radius: 3px;
border: 2px solid #494a4b; */
}
.right-icon{
position: relative;
width: 25px;
margin: 0 0 0 auto;
cursor: pointer;
}
.footer{
width: 100%;
margin-top: 100px;
display: flex;
justify-content: space-between;
font-size: 13px;
color: #494a4b;
}
.footer div{
cursor: pointer;
padding: 0 .2em;
border-radius: 4px;
}
.footer-right{
border-radius: 4px;
}
.footer .span{
cursor: pointer;
color: #fff;
background-color: #fe7345;
}
.hidden{
display: none;
width: 100%;
}
.todo-template{
display: none;
}
.todo-item1{
margin-bottom: 10px;
cursor: pointer;
border-radius: 5px;
display: flex;
align-items: center;
padding: 8px 10px 8px 0;
background-color: #fe7345;
animation: list .75s ease-in-out both ;
}
@keyframes list {
0%{
transform: rotateX(90deg);
opacity: 0;
}
40%{
transform: rotateX(-10deg);
}
70%{
transform: rotateX(10deg);
}
100%{
transform: rotateX(0deg);
opacity: 1;
}
}
.down-box{
overflow: hidden;
height: 0;
position: absolute;
width: 50px;
background-color: rgb(76, 76, 76);
color: #fff;
list-style: none;
top: 25px;
transition: height 0.5s;
-webkit-transition:height 0.5s;
z-index: 100;
border-radius: 5px;
transition: all 0.2s;
}
.down-box li:hover{
opacity: .8;
}
.player{
position: absolute;
right: 30px;
top: 200px;
background-color: pink;
width: 200px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 5px;
overflow: hidden;
transition: width 0.5s;
}
.player .iconfont{
cursor: pointer;
font-size: 30px;
transition: color 0.2s;
}
.player .iconfont:hover{
color: #fff;
}
audio{
display: none;
}
.musicing{
animation: turn 3s linear infinite;
color: #fff;
}
@keyframes turn {
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
.gif{
position: absolute;
bottom: 20px;
}
.tips{
display: none;
background-color: #fff;
position: absolute;
left: 80px;
padding: .3em;
top: 30px;
white-space: nowrap;
border-radius: 5px;
}
.todo-list input{
border: 0;
font-size: 14px;
outline: none;
background-color: #f2f2f2;
border-bottom: 2px dashed #494a4b;
}
.date{
position: absolute;
font-size: small;
top: 30px;
left:30px;
color:#fe7345;
}
.colud{
width: 100%;
top: 0;
position: absolute;
z-index: -1;
display: flex;
overflow: hidden;
}
2.JS
代码如下（示例）：
window.onload = function () {
var btn = document.querySelector(".submit-btn");
var input = document.getElementsByTagName("input")[0];
var text = document.getElementsByClassName("empty-todos")[0];
var hidden = document.getElementsByClassName("hidden")[0];
load();
footer();
playMove();
player();
aliMove();
coludMove();
// 点击submit按钮
btn.onmousedown = function () {
// 点击按钮后阴影消失
btn.className = btn.className.replace(" submit-btn1", "");
// 输入框不为空s
if (input.value.trim()) {
// 先读取本地存储原来的数据
var local = getData();
// 当输入时，先更新数组，再替换本地存储
local.push({ text: input.value, done: false ,date:getDate()});
saveData(local);
// 渲染加载数据
load();
}
};
// 按钮阴影样式
btn.onmouseup = function () {
btn.className += " submit-btn1";
};
// 渲染加载数据
function load() {
var todolist = document.querySelector(".todo-list");
var str = "";
// 读取本地存储
// 过滤
var data = fil();
data.forEach((element, index) => {
if (element.done) {
str =
'' +
element.text +
' ' +
str;
} else {
str =
'' +
element.text +
''+element.date+' ' +
str;
}
});
input.value = "";
if (str) {
text.style.display = "none";
hidden.style.display = "block";
todolist.innerHTML = str;
} else {
text.style.display = "block";
hidden.style.display = "none";
}
revise();
del();
downBox();
updata();
}
//更改状态
function updata() {
var left = document.querySelectorAll(".left-icon");
left.forEach((element) => {
element.onclick = function () {
// 获取本地数据
var data = getData();
//修改数据
var index = element.parentNode.children[2].getAttribute("id");
if (element.checked) {
data[index].done = true;
} else {
data[index].done = false;
}
// 保存本地存储
saveData(data);
// 下端变化
footer();
select();
// 重新渲染
load();
};
});
}
// 删除操作
function del() {
var del = document.querySelectorAll(".del");
del.forEach((element) => {
element.onclick = function () {
// 先获取本地存储
var data = getData();
// 修改数据
var index = element.parentNode.getAttribute("id");
data.splice(index, 1);
// 保存本地
saveData(data);
// 重新渲染
load();
};
});
}
// 双击修改
function revise() {
let todoTexts = document.querySelectorAll(".todo-item .todo-text");
todoTexts.forEach((e) => {
e.ondblclick = function () {
//获取存储
let data = getData();
// 获取点击的id
let index = e.parentNode.children[2].getAttribute("id");
// 文本变为可编辑
e.innerHTML='';
let input=e.childNodes[0];
// 初始焦点在后边
input.setSelectionRange(input.value.length,+input.value.length);
// 失去焦点后 修改数组
e.childNodes[0].onblur=function(){
data[index].text=input.value;
// 存入本地存储
saveData(data);
e.innerText=data[index].text;
}
// 修改存储
};
});
}
// 下拉框
function downBox() {
let db = document.querySelectorAll(".time");
let down=document.querySelectorAll('.down-box');
down.forEach(e => {
e.onmouseout=function(){
e.style.height=0;
}
});
db.forEach((element) => {
element.onclick = function () {
if (element.parentNode.children[0].style.height) {
element.parentNode.children[0].style.height = null;
element.style.color = null;
} else {
element.parentNode.children[0].style.height = 50 + "px";
element.style.color = "gold";
var li = element.parentNode.children[0].childNodes;
li[0].onclick = function () {
element.parentNode.children[0].style.height = null;
timer(15, element.parentNode.getAttribute("id"));
setTimeout(function () {
element.style.color = null;
}, 15000);
};
li[1].onclick = function () {
element.parentNode.children[0].style.height = null;
timer(60, element.parentNode.getAttribute("id"));
setTimeout(function () {
element.style.color = null;
}, 60000);
};
}
};
});
// 失去焦点
down.forEach(e => {
e.onblur=function(){
e.style.height=null;
}
});
}
// 计数器
function timer(time, index) {
var data = getData();
let tip = document.querySelector(".tips");
setTimeout(function () {
tip.style.display = "block";
tip.innerText = data[index].text + "时间到了~";
}, time * 1000);
}
// 读取本地储存的数据
function getData() {
var data = localStorage.getItem("todolist");
if (data) {
// 本地储存的数据是字符串格式的 我门需要的是对象格式的
return JSON.parse(data);
} else {
return [];
}
}
//保存本地存储
function saveData(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
// 表格下端操作
function footer() {
// 获取本地存储
var data = getData();
// 未完成数目
var num = 0;
data.forEach((element) => {
if (!element.done) {
num++;
}
});
var footer = document.querySelector(".footer");
if (num != 0) {
//存在 完成 未完成
if (num != data.length) {
var str =
'AllActiveCompletedClear Completed';
} else {
var str =
'All';
}
} else {
if (data.length - num > 0) {
//有完成的任务
var str =
'AllClear completed';
} else {
var str =
'All';
}
}
footer.innerHTML = str;
// select();
var itemLeft = document.querySelector(".footer-left");
itemLeft.innerText = num + " item left";
}
// 按钮切换
function select() {
var data = getData();
var num = 0;
data.forEach((element) => {
if (!element.done) {
num++;
}
});
var up = document.querySelectorAll(".up");
// 切换选中
up.forEach((element) => {
element.onclick = function () {
// 删除选中
up.forEach((element) => {
element.className = element.className.replace(" span", "");
});
// 添加选中
element.className += " span";
//渲染
load();
};
});
}
//过滤
function fil() {
var data = getData();
var arr = [];
// 选中all
if (document.querySelector(".active.span")) {
arr = data.filter((item) => item.done == false);
} else if (document.querySelector(".comp.span")) {
arr = data.filter((item) => item.done == true);
} else if (document.querySelector(".clear.span")) {
clear();
footer();
arr = getData();
} else {
arr = data;
}
return arr;
}
// 清除
function clear() {
// 获取本地存储
var data = getData();
// 删除已完成的
data = data.filter((item) => item.done == false);
// 存入本地存储
saveData(data);
}
// 悬浮窗移动
function playMove() {
var player = document.querySelector(".player");
var canMove;
var change;
// 鼠标点击时坐标
var x = 0;
var y = 0;
player.onmousedown = function (e) {
canMove = true;
x = e.pageX - player.offsetLeft;
y = e.pageY - player.offsetTop;
};
player.onmouseup = function () {
canMove = false;
flexing();
};
player.onblur = function () {
canMove = false;
flexing();
};
player.onmousemove = function (e) {
if (canMove) {
// 点击时坐标之差与移动时相等
// x轴：px2-px1=mx2-mx1;
let left = e.pageX - x;
let top = e.pageY - y;
if (left < 0) left = 0;
if (top < 0) top = 0;
let maxLeft = innerWidth - player.offsetWidth;
let maxTop = innerHeight - player.offsetHeight;
if (left >= maxLeft) left = maxLeft;
if (top >= maxTop) top = maxTop;
player.style.left = left + "px";
player.style.top = top + "px";
}
};
// 伸缩
function flexing() {
// 距离右边伸缩距离
let d = 20;
if (!canMove && !change) {
let x = window.innerWidth - d - player.offsetWidth;
if (player.offsetLeft >= x) {
player.style.width = 10 + "px";
player.style.left = innerWidth - 10 + "px";
change = true;
}
}
// 伸
player.onmouseover = function () {
if (change) {
player.style.width = 200 + "px";
player.style.left = innerWidth - 210 + "px";
change = false;
}
};
}
}
// 音乐播放
function player() {
// 当前播放索引
var index = 0;
// 播放状态
let aired = false;
let audios = document.querySelectorAll(".player audio");
let music = document.querySelector(".music");
let above = document.querySelector(".above");
let play = document.querySelector(".play");
let next = document.querySelector(".next");
above.onclick = function () {
index--;
playing(index);
};
next.onclick = function () {
index++;
console.log(index);
playing(index);
};
play.onclick = function () {
if (!aired) {
play.innerHTML = '';
aired = true;
playing(index);
} else {
play.innerHTML = '';
aired = false;
stop(index);
}
};
// 播放
function playing() {
if (index < 0) {
index = audios.length - 1;
}
if (index > audios.length - 1) {
index = 0;
}
// 格式化所有音频
audios.forEach((e) => {
e.load();
});
play.innerHTML = '';
aired = true;
music.className = "musicing";
audios[index].play();
audios[index].addEventListener("ended", function () {
index++;
playing(index);
});
}
// 暂停
function stop(index) {
audios[index].pause();
music.className = "music";
}
}
// 清除tips
function removeTips() {
let gif = document.querySelector(".gif");
let tip = document.querySelector(".tips");
gif.onclick = function () {
tip.style.display = "none";
};
}
// 阿里移动
function aliMove() {
let right = 0;
let ali = document.querySelector(".gif");
setInterval(function () {
right += 2;
if (right > 1500) right = 0;
ali.style.right = right + "px";
}, 10);
removeTips();
}
// 当前日期
function getDate(){
let date=new Date();
let year=date.getFullYear();
let month=date.getMonth()+1;
let d=date.getDate();
let hours=date.getHours();
let min=date.getMinutes();
let s=year+'/'+month+'/'+d+'/'+ hours+'/'+min;
return s;
}
// 云
function coludMove(){
let colud=document.querySelector('.colud div');
console.log(colud.offsetWidth);
let left=-1699;
setInterval(function(){
left+=0.25;
if(left==0)left=-1699;
colud.style.marginLeft=left+'px';
},10)
}
};