devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML+CSS+JS实现TodoList应用和动画_css todolist

作者：weixin_40725706 | 2024-05-29 05:39:02

赞

踩

css todolist

目录

 前言

 HTML部分

CSS部分

JS部分

 前言

        界面比较简陋，实现了本地存储，刷新不会损失数据，可以定时提醒，并添加了三个动画。代码还有很多不足之处，应该可以写得更精简的，详情请看代码。

 HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="todoList.css" />
  9.     <link rel="stylesheet" href="iconfont.css" />
  10.     <script src="todoList.js" ></script>
  11.   </head>
  12.   <body>
  13.     <div class="all">
  14.         <div class="kkl"></div>
  15.         <div class="add">
  16.           <div class="combine">
  17.             <div class="cephalic">
  18.               <span class="iconfont" id="logo">&#xe604;</span>
  19.               <span class="headline">任务</span>
  20.             </div>
  21.             <div class="task">
  22.                <ul class="todo-list" id="todolist"></ul> 
  23.               <div class="com">
  24.                 <div class="store" style="cursor: pointer;">
  25.                   <span>已完成</span><i class="iconfont" id="vue">&#xe602;</i>
  26.                 </div>
  27.                 <ul class="todo-com"> </ul>
  28.               </div>
  29.              
  30.             </div>
  31.             <div class="join">
  32.                 <from class="from">
  33.                     <button class="submit">
  34.                       <span class="iconfont" id="submit_add">&#xeaf3;</span>
  35.                     </button>
  36.                     <div class="from-input">
  37.                       <input placeholder="添加任务" id="content">
  38.                     </div>
  39.                 </from>
  40.             </div>
  41.           </div>
  42.         </div>
  43.         
  44.         <div class="warn" id="div">
  45.           <img src="m1.gif" >
  46.         </div>
  47.    
  48.         <div class="contet">
  49.           <div id="rainBox"></div>
  50.         </div>
  51.         <div class="sup" id="sup">
  52.           <div class="hint" id="hint"></div>
  53.           <img src="c1.gif" id="nv">
  54.         </div>
  55.     </div>
  56.   </body>
  57. </html>

CSS部分

  1. * {
  2.   margin: 0px;
  3.   padding: 0px;
  4.   list-style-type: none;
  5. }
  6. html,
  7. body {
  8.   width: 100%;
  9.   height: 100%;
  10.   overflow-x: hidden;
  11. }
  12. body {
  13.   background-image: linear-gradient(90deg, #bedc98, #84e4a6);
  14. }
  15. .all {
  16.   display: flex;
  17.   width: 100%;
  18.   position: relative;
  19.   height: 100%;
  20. }
  21. .add {
  22.   display: table;
  23.   border-radius: 30px;
  24.   background-color: #ffffff;
  25.   width: 520px;
  26.   height: 550px;
  27.   position: relative;
  28.   margin-top: 80px;
  29.   margin-left: auto;
  30.   margin-right: auto;
  31. }
  32. .combine {
  33.   position: relative;
  34.   margin: auto;
  35.   margin-top: 35px;
  36.   width: 400px;
  37. }
  38. .cephalic {
  39.   width: 398px;
  40.   height: 50px;
  41.   display: flex;
  42.   margin-bottom: 30px;
  43. }
  44. #logo {
  45.   margin-top: 2px;
  46.   font-size: 40px;
  47.   color: rgb(142, 135, 135);
  48.   text-align: center;
  49. }
  50. .headline {
  51.   margin-left: 10px;
  52.   margin-top: 5px;
  53.   font-size: 30px;
  54.   font-family: "Times New Roman", Times, serif;
  55.   text-align: center;
  56.   font-weight: 700;
  57.   color: rgb(156, 149, 149);
  58. }
  59. .task {
  60.   height: 350px;
  61.   overflow: auto;
  62. }
  63. .press-sel {
  64.   outline: none;
  65.   position: relative;
  66.   border: none;
  67.   background-color: transparent;
  68. }
  69. .todo-list li {
  70.   text-overflow: ellipsis;
  71.   border-radius: 15px;
  72.   display: flex;
  73.   font-size: 20px;
  74.   color: rgb(255, 255, 255);
  75.   height: 45px;
  76.   margin-bottom: 20px;
  77.   background-color: #84b5a0;
  78. }
  79.  
  80. .todo-list li {
  81.   margin-left: 18px;
  82.   font-size: 23px;
  83.   text-overflow: ellipsis;
  84.   font-weight: 600;
  85.   color: rgb(255, 255, 255);
  86. }
  87. .todo-com li {
  88.   text-overflow: ellipsis;
  89.   border-radius: 15px;
  90.   display: flex;
  91.   font-size: 20px;
  92.   color: rgb(255, 255, 255);
  93.   height: 45px;
  94.   margin-bottom: 20px;
  95.   background-color: #4a4a4a46;
  96. }
  97. .todo-com li {
  98.   margin-left: 18px;
  99.   font-size: 23px;
  100.   text-overflow: ellipsis;
  101.   font-weight: 600;
  102.   color: rgb(255, 255, 255);
  103. }
  104. .content {
  105.   margin-top: 9px;
  106.   width: 250px;
  107.   margin-left: 10px;
  108.   text-overflow: ellipsis;
  109.   overflow: hidden;
  110.   font-family: Arial, Helvetica, sans-serif;
  111. }
  112. .del {
  113.   color: rgb(255, 255, 255);
  114.   font-size: 23px;
  115.   float: right;
  116.   position: absolute;
  117.   margin-left: 40px;
  118.   font-weight: 700;
  119.   margin-top: 10px;
  120. }
  121.  
  122. .sel {
  123.   color: rgb(255, 255, 255);
  124.   font-size: 23px;
  125.   margin-left: 10px;
  126.   float: right;
  127.   font-weight: 700;
  128. }
  129. .press-del {
  130.   display: flex;
  131.   position: relative;
  132.   border: none;
  133.   background-color: transparent;
  134. }
  135. .join {
  136.   height: 35px;
  137.   border-radius: 10px;
  138.   margin-top: 8px;
  139. }
  140. .from {
  141.   display: flex;
  142. }
  143. .submit {
  144.   margin-top: 2px;
  145.   border: none;
  146.   background-color: transparent;
  147. }
  148. #submit_add {
  149.   color: #6c6363;
  150.   font-size: 30px;
  151.   margin-left: 10px;
  152. }
  153. .from-input {
  154.   margin: 10px;
  155. }
  156. #content {
  157.   font-size: 18px;
  158.   background-color: transparent;
  159.   border: none;
  160.   outline: none;
  161.   height: 32px;
  162.   width: 300px;
  163.   color: #878484;
  164.   border-bottom: 3px dashed #84b5a0;
  165. }
  166.  
  167. .task::-webkit-scrollbar {
  168.   /*滚动条整体样式*/
  169.   width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  170.   height: 1px;
  171. }
  172. .task::-webkit-scrollbar-thumb {
  173.   /*滚动条里面小方块*/
  174.   border-radius: 10px;
  175.   background-color: rgb(228, 228, 228);
  176. }
  177. .task::-webkit-scrollbar-track {
  178.   /*滚动条里面轨道*/
  179.   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  180.   background: #ededed;
  181.   border-radius: 10px;
  182. }
  183.  
  184. input::placeholder {
  185.   color: rgb(223, 223, 223);
  186.   opacity: 1;
  187. }
  188. .store {
  189.   width: 120px;
  190.   color: #4a4a4a46;
  191.   background-color: #66666621;
  192.   font-size: 20px;
  193.   font-weight: 700;
  194.   margin-left: 15px;
  195.   height: 35px;
  196.   border-radius: 15px;
  197.   margin-bottom: 20px;
  198.   display: flex;
  199. }
  200. .store span {
  201.   display: block;
  202.   margin-top: 3px;
  203.   margin-left: 15px;
  204. }
  205.  
  206. .store i {
  207.   display: block;
  208.   margin-top: 6px;
  209.   margin-left: 10px;
  210. }
  211. .epo {
  212.   margin-top: 10px;
  213.   color: rgb(255, 255, 255);
  214.   font-size: 23px;
  215.   margin-right: 10px;
  216.   font-weight: 700;
  217. }
  218. .timer {
  219.   position: absolute;
  220.   margin-left: 30px;
  221.   margin-top: -35px;
  222.   height: 80px;
  223.   width: 60px;
  224.   z-index: 1;
  225.   display: none;
  226.   border-radius: 30px !important;
  227. }
  228. .timer span {
  229.   width: 60px;
  230.   height: 25px;
  231.   border-radius: 5px;
  232.   background-color: rgb(116, 141, 121);
  233.   font-size: 16px;
  234.   display: block;
  235.   color: #ffffff;
  236.   border: #1b892dfa solid 1px;
  237. }
  238. .timer span:hover {
  239.   background-color: bisque;
  240. }
  241. .warn {
  242.   position: absolute;
  243. }
  244. .warn img {
  245.   width: 260px;
  246. }
  247. .contet {
  248.   position: relative;
  249. }
  250. #rainBox {
  251.   position: fixed;
  252.   top: 0px;
  253.   left: 0;
  254.   width: 100%;
  255.   height: 100%;
  256.   /* 不阻挡其它事件 */
  257.   pointer-events: none;
  258. }
  259. .rain {
  260.   position: absolute;
  261.   width: 1px;
  262.   height: 30px;
  263.   background: linear-gradient(
  264.     rgba(255, 255, 255, 0.6),
  265.     rgba(255, 255, 255, 0.9)
  266.   );
  267. }
  268.  
  269. .sup {
  270.   position: fixed;
  271.   right: 0px;
  272.   bottom: 10px;
  273. }
  274.  
  275. #nv {
  276.   width: 240px;
  277. }
  278. .hint {
  279.   display: none;
  280.   overflow: hidden;
  281.   height: 25px;
  282.   background-color: rgba(166, 254, 150, 0.58);
  283.   width: 210px;
  284.   border-radius: 30px;
  285.   margin-left: 25px;
  286.   font-size: 20px;
  287.   font-weight: 600;
  288.   text-align: center;
  289.   color: rgb(228, 121, 67);
  290. }
  291. .content title{
  292.   position: absolute;
  293.         color: #ffffff;
  294.         font-size: 14px;
  295.         padding: 4px;
  296.         background: rgba(40, 40, 40, 0.8);
  297.         border-radius:5px;
  298.         z-index:999;
  299.  
  300. }

JS部分

        代码比较杂，写得比较繁琐，不过简单易懂，作为新手也是可以看懂的，基本上每个代码都有注释。添加事件使用的是字符串，比较简单，一直拼接字符串，然后使用innerHTML进行渲染。

  1. window.onload = function () {
  2.   let todoList = document.getElementsByClassName("todo-list")[0];
  3.   let newInput = document.querySelector("#content");
  4.   let todoCom = document.getElementsByClassName("todo-com")[0];
  5.   let Hint = document.getElementsByClassName("hint")[0];
  6.   load();
  7.   //存储input里的内容
  8.   newInput.onkeydown = function (event) {
  9.     if (event.keyCode === 13 && newInput.value !== "") {
  10.       var local = getData();
  11.       //存储格式
  12.       local.push({ title: newInput.value, done: false });
  13.       savaDate(local);
  14.       load();
  15.     }
  16.   };
  17.  
  18.   //读取本地储存
  19.   function getData() {
  20.     var data = localStorage.getItem("todolist");
  21.     if (data !== null) {
  22.       // JSON.parse() 将一个 JSON 字符串转换为 JavaScript 对象
  23.       return JSON.parse(data);
  24.     } else {
  25.       return [];
  26.     }
  27.   }
  28.   //保存本地数据
  29.   function savaDate(data) {
  30.     // JSON.stringify() 将 JavaScript 值转换为 JSON 字符串
  31.     localStorage.setItem("todolist", JSON.stringify(data));
  32.   }
  33.   //渲染加载数据
  34.   function load() {
  35.     //读取本地数据
  36.     var data = getData();
  37.     var str = "";
  38.     var stv = "";
  39.     //遍历数据,拼接字符串
  40.     data.forEach((event, index) => {
  41.       if (event.done === false) {
  42.         str =
  43.           '<li class="record-item"> ' +
  44.           '<button class="press-sel">' +
  45.           '<i class="iconfont sel" id="' +
  46.           index +
  47.           '">&#xe600;</i>' +
  48.           "</button>" +
  49.           '<p class="content" title=' +
  50.           event.title +
  51.           ">" +
  52.           event.title +
  53.           "</p>" +
  54.           '<button class="press-del">' +
  55.           '<i class="iconfont epo" id="' +
  56.           index +
  57.           '" style="cursor: pointer;">&#xe6de;' +
  58.           '<div class="timer" id="' +
  59.           index +
  60.           '"><span class="second"  id="' +
  61.           index +
  62.           '">5s</span><span class="hour"  id="' +
  63.           index +
  64.           '">1h</span><span class="day"  id="' +
  65.           index +
  66.           '">1d</sapn></div></i>' +
  67.           '<i class="iconfont del" id="' +
  68.           index +
  69.           '" style="cursor: pointer;">&#xe869;</i>' +
  70.           "</li>" +
  71.           str;
  72.       } else {
  73.         stv =
  74.           '<li class="record-ite"> ' +
  75.           '<button class="press-sel">' +
  76.           '<i class="iconfont sel" id="' +
  77.           index +
  78.           '">&#xe603;</i>' +
  79.           "</button>" +
  80.           '<p class="content" title=' +
  81.           event.title +
  82.           " ><s>" +
  83.           event.title +
  84.           "</s></p>" +
  85.           '<button class="press-del">' +
  86.           '<i class="iconfont del" id="' +
  87.           index +
  88.           '" style="cursor: pointer;">&#xe869;</i>' +
  89.           "</li>" +
  90.           stv;
  91.       }
  92.     });
  93.     //遍历之前清空ul里的元素内容·
  94.     newInput.value = "";
  95.     //渲染内容到HTML
  96.     todoList.innerHTML = str;
  97.     todoCom.innerHTML = stv;
  98.     //删除的方法
  99.     del();
  100.     //完成的方法
  101.     sel();
  102.     //收拢的方式
  103.     store();
  104.     //完成隐藏
  105.     com();
  106.     console.log(timers);
  107.     //提醒事件
  108.     timers();
  109.     //提醒时间
  110.     second();
  111.     hour();
  112.     day();
  113.     //雨点
  114.     // rain();
  115.     //拖动
  116.     drag();
  117.     sup();
  118.   }
  119.   //删除操作
  120.   function del() {
  121.     var del = document.querySelectorAll(".del");
  122.     // console.log(del);
  123.     if (del !== "") {
  124.       del.forEach((element) => {
  125.         element.onclick = function () {
  126.           //本地读取
  127.           var data = getData();
  128.           //修改数据
  129.           var index = element.getAttribute("id");
  130.           data.splice(index, 1);
  131.           //保存本地
  132.           savaDate(data);
  133.           //渲染
  134.           load();
  135.         };
  136.       });
  137.     }
  138.   }
  139.   //完成
  140.   function sel() {
  141.     var sel = document.querySelectorAll(".sel");
  142.     if (sel !== "") {
  143.       sel.forEach((element) => {
  144.         element.onclick = function () {
  145.           //本地读取
  146.           var data = getData();
  147.           //修改数据
  148.           //获得索引
  149.           var index = element.getAttribute("id");
  150.           // console.log(data[index].done);
  151.           //修改数组
  152.           if (data[index].done === false) {
  153.             //下雨庆祝
  154.             rain();
  155.             data.splice(index, 1, { title: data[index].title, done: true });
  156.           } else {
  157.             data.splice(index, 1, { title: data[index].title, done: false });
  158.           }
  159.           //保存本地
  160.           savaDate(data);
  161.  
  162.           //渲染
  163.           load();
  164.         };
  165.       });
  166.     }
  167.   }
  168.   //完成收拢
  169.   function store() {
  170.     var store = document.querySelectorAll(".store");
  171.     var vue = document.getElementById("vue");
  172.     store.forEach((element) => {
  173.       element.onclick = function () {
  174.         if (todoCom.style.display == "none") {
  175.           todoCom.style.display = "block";
  176.           vue.innerHTML = "&#xe602;";
  177.         } else {
  178.           todoCom.style.display = "none";
  179.           vue.innerHTML = "&#xe645;";
  180.         }
  181.       };
  182.     });
  183.   }
  184.   //完成隐藏
  185.   function com() {
  186.     let Com = document.querySelectorAll(".com");
  187.     Com.forEach((element) => {
  188.       if (todoCom.innerHTML == "") {
  189.         element.style.display = "none";
  190.       } else {
  191.         element.style.display = "block";
  192.       }
  193.     });
  194.   }
  195.   //提醒事件
  196.   function timers() {
  197.     var epo = document.querySelectorAll(".epo");
  198.     console.log(epo);
  199.     epo.forEach((element) => {
  200.       var isShow = false;
  201.       var time;
  202.       element.onclick = function () {
  203.         clearTimeout(time);
  204.         if (!isShow) {
  205.           isShow = true;
  206.           element.childNodes[1].style.display = "block";
  207.         } else {
  208.           isShow = false;
  209.           element.childNodes[1].style.display = "none";
  210.         }
  211.         //鼠标移入事件
  212.         element.onmouseover = () => {
  213.           clearTimeout(time);
  214.         };
  215.         //鼠标移出事件
  216.         element.onmouseout = () => {
  217.           clearTimeout(time);
  218.           //计时器更改属性
  219.           if (isShow) {
  220.             time = setTimeout(() => {
  221.               element.childNodes[1].style.display = "none";
  222.               isShow = false;
  223.             }, 400);
  224.           }
  225.         };
  226.       };
  227.     });
  228.   }
  229.   //计时5s
  230.   function second() {
  231.     let second1 = document.querySelectorAll(".second");
  232.     // let hint=document.getElementById("hint");
  233.     second1.forEach((element) => {
  234.       element.onclick = function () {
  235.         //本地读取
  236.         var data = getData();
  237.         var index = element.getAttribute("id");
  238.         var time;
  239.         var stv = "";
  240.         console.log(index);
  241.         clearTimeout(time);
  242.         time = setTimeout(function () {
  243.           Hint.style.display = "block";
  244.           stv = data[index].title;
  245.           Hint.innerHTML = stv;
  246.           // alert("任务`"+data[index].title+"`时间到啦");
  247.         }, 5000);
  248.       };
  249.     });
  250.   }
  251.   //计时1小时
  252.   function hour() {
  253.     let hour = document.querySelectorAll(".hour");
  254.     hour.forEach((element) => {
  255.       element.onclick = function () {
  256.         //本地读取
  257.         var data = getData();
  258.         var stv = "";
  259.         var index = element.getAttribute("id");
  260.         var time;
  261.         clearTimeout(time);
  262.         time = setTimeout(function () {
  263.           // alert("任务`"+data[index].title+"`时间到啦")
  264.           Hint.style.display = "block";
  265.           stv = data[index].title;
  266.           Hint.innerHTML = stv;
  267.         }, 60 * 1000 * 60);
  268.       };
  269.     });
  270.   }
  271.   //计时一天
  272.   function day() {
  273.     let day = document.querySelectorAll(".day");
  274.     day.forEach((element) => {
  275.       element.onclick = function () {
  276.         //本地读取
  277.         var data = getData();
  278.         var index = element.getAttribute("id");
  279.         var time;
  280.         var stv = "";
  281.         // console.log(index)
  282.         clearTimeout(time);
  283.         time = setTimeout(function () {
  284.           Hint.style.display = "block";
  285.           stv = data[index].title;
  286.           Hint.innerHTML = stv;
  287.         }, 1000 * 60 * 60 * 24);
  288.       };
  289.     });
  290.   }
  291.   //下雨事件
  292.   function rain() {
  293.     const box = document.getElementById("rainBox");
  294.     var time;
  295.     //每隔一段时间添加雨点
  296.     time = setInterval(() => {
  297.       // clearInterval(timer)
  298.       let boxHeight = box.clientHeight;
  299.       let boxWidth = box.clientWidth;
  300.       const rain = document.createElement("div");
  301.       rain.classList.add("rain");
  302.       rain.style.top = 0;
  303.       //随机刷新雨点位置
  304.       rain.style.left = Math.random() * boxWidth + "px";
  305.       //随机雨点透明度
  306.       rain.style.opacity = Math.random();
  307.       box.appendChild(rain);
  308.       //每隔一段时间雨点下落
  309.       let race = 1;
  310.       const timer = setInterval(() => {
  311.         if (parseInt(rain.style.top) > boxHeight) {
  312.           clearInterval(timer);
  313.           box.removeChild(rain);
  314.         }
  315.         race++;
  316.         rain.style.top = parseInt(rain.style.top) + race + "px";
  317.       }, 1);
  318.     }, 1);
  319.     setInterval(() => {
  320.       clearTimeout(time);
  321.     }, 10000);
  322.   }
  323.   //小猫
  324.   function drag() {
  325.     var isShow = false;
  326.     let div = document.getElementById("div");
  327.     let body;
  328.     setInterval(() => {
  329.       // 获取整个网页的宽度
  330.       body = document.body.scrollWidth;
  331.       //   console.log(body)
  332.       div.onclick = function () {
  333.         if (body === 1490) {
  334.           if (!isShow) {
  335.             isShow = true;
  336.           } else {
  337.             isShow = false;
  338.           }
  339.           if (isShow) {
  340.             // onmousemove鼠标指针移到指定的对象时发生
  341.             document.onmousemove = function (e) {
  342.               let event = e || window.event;
  343.               //解决兼容问题，获得鼠标位置
  344.               div.style.left = event.clientX - div.clientWidth / 2 + "px";
  345.             };
  346.           } else {
  347.             document.onmousemove = function (e) {
  348.               let event = e || window.event;
  349.               //解决兼容问题，获得鼠标位置
  350.               div.style.left = div.style.left;
  351.             };
  352.           }
  353.         }
  354.       };
  355.     }, 100);
  356.   }
  357.   //超人
  358.   function sup() {
  359.     var isShow = false;
  360.     let sup = document.getElementById("sup");
  361.     var num = 0;
  362.     sup.onclick = function () {
  363.       //隐藏提醒框
  364.       Hint.style.display = "none";
  365.       let speed = 15;
  366.       if (!isShow) {
  367.         isShow = true;
  368.       } else {
  369.         isShow = false;
  370.       }
  371.       if (isShow) {
  372.         timer = setInterval(() => {
  373.           num += speed;
  374.           //   获取整个网页的高度
  375.           let body = document.body.scrollHeight;
  376.           sup.style.bottom = num + "px";
  377.           if (num >= body) {
  378.             num = -250;
  379.           }
  380.         }, 100);
  381.       } else {
  382.         //结束计时
  383.         clearInterval(timer);
  384.         num = num;
  385.       }
  386.     };
  387.   }
  388. };

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/640807
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号