文章目录

目录

文章目录

前言

一、效果展示

二、代码

1.HTML

2.CSS

2.JS

前言

最近初学js，用js实现了一个Todolist页面。在一些方面还存在着很多的不足。屏幕上的阿狸和背景的云朵都是会动的，音乐播放器也可以播放音乐。需要图片资源的可以私信我。

实现功能：

Todolist的基本功能
任务进度影响下方按钮，下方按钮也能筛选任务进程
添加了一个音乐播放器（可以拖动，靠近屏幕右侧时，会收缩进去）
背景云朵和阿狸可以移动
定时时间截止后，阿狸将提醒定时事项

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果展示

视频展示：

Todolist展示

二、代码

1.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" /><link rel="stylesheet" type="text/css" href="todolist.css" /><link rel="stylesheet" type="text/css" href="icon/iconfont.css" /><title>Todos App</title><script src="todolist.js"></script></head><body><div class="colud"><div><img src="img//云.png"></div><div><img src="img//云.png"></div></div><div id="app"><div class="container"><!-- 头部图片 --><div class="heading"><div class="img-wrapper"><img src="img/note.75134fb0.svg" alt="" /></div><div class="title">To-Do List</div></div><!-- 输入框 --><div class="form-field"><h1 class="title">~Today I need to~</h1><form class="form-wrapper"><div class="form-input"><input placeholder="Add new todo..." /></div><button type="button" class="submit-btn submit-btn1"><span>Submit</span></button></form></div><!-- text --><div class="empty-todos"><svgclass="svg"aria-hidden="true"focusable="false"data-prefix="fas"data-icon="cliphoard-check"role="img"viewBox="0 0 384 512"><pathfill="currentColor";d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z"></path></svg><span class="msg">Congrat, you have no more tasks to do</span></div><div class="hidden"> <!-- todolist --><ul class="todo-list"></ul><!-- 操作 --><div class="footer"></div></div></div></div><div class="player"><audio controls="controls" ><source src="music/music1.mp3" type="audio/mpeg"></audio><audio controls="controls" ><source src="music/music2.mp3" type="audio/mpeg"></audio><audio controls="controls" ><source src="music/music3.flac" type="audio/mpeg"></audio><div class="music"><i class="iconfont">&#xe7db;</i></div><div class="above"><i class="iconfont">&#xe603;</i></div><div class="play"><i class="iconfont">&#xe6a4;</i></div><div class="next"><i class="iconfont">&#xe602;</i></div></div><div class="gif"><img src="img//ali.gif"><div class="tips">提示</div></div></body>
</html>

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", "");// 输入框不为空sif (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 ='<li class="todo-item1"><input type="checkbox" checked class="left-icon"></input><div class="todo-text">' +element.text +'</div><div class="right-icon" id="' +index +'"><i class="iconfont del">&#xed1e;</i></div></li>' +str;} else {str ='<li class="todo-item"><input type="checkbox" class="left-icon"></input><div class="todo-text">' +element.text +'</div><div class="right-icon" id="' +index +'"><ul class="down-box"><li class="s">15s</li><li class="min">1min</li></ul><i class="iconfont time">&#xe600;</i><i class="iconfont del">&#xed1e;</i></div><div class="date">'+element.date+'</div></li>' +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();// 获取点击的idlet index = e.parentNode.children[2].getAttribute("id");// 文本变为可编辑e.innerHTML='<input type="text" value="'+data[index].text+'"autofocus>';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 ='<div class="footer-left">item left</div><div class="up all span">All</div><div class="up active">Active</div><div class="up comp">Completed</div><div class="up clear">Clear Completed</div>';} else {var str ='<div class="footer-left">item left</div><div class="up all span">All</div>';}} else {if (data.length - num > 0) {//有完成的任务var str ='<div class="footer-left">item left</div><div class="up all span">All</div><div class="up clear">Clear completed</div>';} else {var str ='<div class="footer-left">item left</div><div class="up all span">All</div>';}}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 = [];// 选中allif (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 = '<i class="iconfont">&#xea81;</i>';aired = true;playing(index);} else {play.innerHTML = '<i class="iconfont">&#xe6a4;</i>';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 = '<i class="iconfont">&#xea81;</i>';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";}}// 清除tipsfunction 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)}
};

JS + HTML + CSS 实现Todolist相关推荐

【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值（或者说js是如何主动推送参数给CSS使用的）？
js获取CSS/SCSS/LESS的常量 <template><div id="body"><p>--color: {{ color }}< ...
简短的几句js实现css压缩和反压缩功能
写在前面最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...
ionic中使用Cordova Uglify 压缩js与css
参照:https://www.npmjs.com/package/cordova-uglify 安装:npm install cordova-uglify 安装完成之后,打开: hooks/uglif ...
页面样式乱了，但是又感觉各种js，css都引入了
页面样式乱了,但是又感觉各种js,css都引入了怎么办: 一直不太清楚什么原因: <!DOCTYPE html> <html> <head> <meta c ...
通过js引入当前所需要的js，css等
在我们web前端页面中经常会用到许多外部的js,css文件,那么问题来了,怎样才能一次性引入? 通过js便可实现走码: //创建一个init.js文件 var jsUrls = "js/j ...
Visual Studio 编译任务压缩js和css文件
如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...
通过minify将项目中js和css文件的打包
减少http请求数,有三个好处,即减少DNS请求所耗费的时间..减少服务器压力.减少http请求头,因此这是我们前端性能优化的一个关键点. 对于我们前端来说,减少http请求数的一个途径就是合并js和 ...
js、css的阻塞问题
js.css的阻塞问题这篇文章主要是探索js.css的加载顺序及其影响问题. 下面的代码可以让浏览器阻塞: <!DOCTYPE html> <html lang="en& ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...

JS + HTML + CSS 实现Todolist

文章目录

前言

一、效果展示

二、代码

1.HTML

2.CSS

2.JS

JS + HTML + CSS 实现Todolist相关推荐

最新文章

热门文章