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

JS + HTML + CSS 实现Todolist_html+css+js显示一个列表

作者：AllinToyou | 2024-03-22 10:09:15

赞

踩

html+css+js显示一个列表

文章目录

前言

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

实现功能：

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

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

一、效果展示

视频展示：

Todolist展示

 

 

二、代码

1.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.     <link rel="stylesheet" type="text/css" href="todolist.css" />
  8.     <link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
  9.     <title>Todos App</title>
  10.     <script src="todolist.js"></script>
  11.   </head>
  12.   <body>
  13.     <div class="colud">
  14.       <div><img src="img//云.png"></div>
  15.       <div><img src="img//云.png"></div>
  16.     </div>
  17.     <div id="app">
  18.       <div class="container">
  19.         <!-- 头部图片 -->
  20.         <div class="heading">
  21.           <div class="img-wrapper">
  22.             <img src="img/note.75134fb0.svg" alt="" />
  23.           </div>
  24.           <div class="title">To-Do List</div>
  25.         </div>
  26.  
  27.         <!-- 输入框 -->
  28.         <div class="form-field">
  29.           <h1 class="title">~Today I need to~</h1>
  30.           <form class="form-wrapper">
  31.             <div class="form-input">
  32.               <input placeholder="Add new todo..." />
  33.             </div>
  34.             <button type="button" class="submit-btn submit-btn1">
  35.               <span>Submit</span>
  36.             </button>
  37.           </form>
  38.         </div>
  39.  
  40.         <!-- text -->
  41.         <div class="empty-todos">
  42.           <svg
  43.             class="svg"
  44.             aria-hidden="true"
  45.             focusable="false"
  46.             data-prefix="fas"
  47.             data-icon="cliphoard-check"
  48.             role="img"
  49.             viewBox="0 0 384 512"
  50.           >
  51.             <path
  52.               fill="currentColor"
  53.               ;
  54.               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"
  55.             ></path>
  56.           </svg>
  57.           <span class="msg">Congrat, you have no more tasks to do</span>
  58.         </div>
  59.  
  60.         <div class="hidden"> 
  61.           <!-- todolist -->
  62.           <ul class="todo-list"></ul>
  63.  
  64.           <!-- 操作 -->
  65.           <div class="footer"></div>
  66.         </div>
  67.       </div>
  68.     </div>
  69.     <div class="player">
  70.       <audio controls="controls" >
  71.         <source src="music/music1.mp3" type="audio/mpeg">
  72.       </audio>
  73.       <audio controls="controls" >
  74.         <source src="music/music2.mp3" type="audio/mpeg">
  75.       </audio>
  76.       <audio controls="controls" >
  77.         <source src="music/music3.flac" type="audio/mpeg">
  78.       </audio>
  79.       <div class="music"><i class="iconfont">&#xe7db;</i></div>
  80.       <div class="above"><i class="iconfont">&#xe603;</i></div>
  81.       <div class="play"><i class="iconfont">&#xe6a4;</i></div>
  82.       <div class="next"><i class="iconfont">&#xe602;</i></div>
  83.     </div>
  84.     <div class="gif">
  85.       <img src="img//ali.gif">
  86.       <div class="tips">提示</div>
  87.     </div>
  88.   </body>
  89. </html>

2.CSS

代码如下（示例）：

  1. *,
  2. ::after,
  3. ::before {
  4.   margin: 0;
  5.   padding: 0;
  6.   font-family: "Yanone Kaffeesatz", sans-serif;
  7.   box-sizing: border-box;
  8. }
  9. html {
  10.   color: #494a4b;
  11.   line-height: 1.5;
  12. }
  13. body {
  14.   padding: 50px 0;
  15.   /* 铺满屏幕 */
  16.   min-height: 100vh;
  17.   display: flex;
  18.   justify-content: center;
  19.   align-items: center;
  20.   background-image: linear-gradient(#e66465, #9198e5);
  21.   background-repeat: no-repeat;
  22.   overflow-x: hidden;
  23. }
  24. .container {
  25.   padding: 30px 40px 20px;
  26.   text-align: center;
  27.   width: 440px;
  28.   max-width: 100%;
  29.   margin: 0 auto;
  30.   border-radius: 15px;
  31.   display: flex;
  32.   /* 设置主轴方向，从上到下 */
  33.   flex-direction: column;
  34.   background: #f2f2f2;
  35.   
  36.   
  37. }
  38.  
  39. .heading {
  40.   display: flex;
  41.   align-items: center;
  42.   justify-content: center;
  43.   height: 88px;
  44.   position: relative;
  45. }
  46. .heading .img-wrapper img {
  47.   width: 80px;
  48.   height: 80px;
  49.   /* 保持原有比例，多余会被裁剪 */
  50. }
  51.  
  52. .heading .title {
  53.   transform: rotate(3deg);
  54.   font-size: 21px;
  55.   padding: 0.25em 0.8em 0.15em;
  56.   border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
  57.   color: #fff;
  58.   background: #fe7345;
  59. }
  60.  
  61. .form-field {
  62.   margin-top: 25px;
  63. }
  64. .title {
  65.   font-size: 22px;
  66.   margin-bottom: 18px;
  67. }
  68. .form-input {
  69.   display: inline-block;
  70.   flex-grow: 0.65;
  71.   margin-right: 15px;
  72. }
  73. .form-input input {
  74.   border: none;
  75.   width: 100%;
  76.   border-bottom: 3px dashed #fe7345;
  77.   padding: 5px 0 3px;
  78.   font-size: 15px;
  79.   background: transparent;
  80.   outline: none;
  81. }
  82. .form-wrapper {
  83.   display: flex;
  84.   justify-content: center;
  85. }
  86. .submit-btn {
  87.   cursor: pointer;
  88.   border: none;
  89.   position: relative;
  90.   transform: rotate(4deg);
  91.   border-radius: 6px;
  92.   transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  93. }
  94. .submit-btn:active{
  95.   transform: translateY(4px);
  96.   padding-bottom: 0;
  97. }
  98.  
  99. .submit-btn1::before {
  100.   position: absolute;
  101.   left: 0;
  102.   top: 0;
  103.   content: "";
  104.   width: 100%;
  105.   height: 100%;
  106.   /* 竖直缩放 */
  107.   transform: scaleY(1.1);
  108.   border: 1px solid #494a4b;
  109.   border-radius: inherit;
  110.   transform-origin: top;
  111.   background-image: url(data:image/png;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==);
  112.   background-color: #fe7345;
  113.   transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  114. }
  115.  
  116. .submit-btn span {
  117.   position: relative;
  118.   display: block;
  119.   padding: 0.34em 0.84em;
  120.   border: 2px solid #494a4b;
  121.   border-radius: inherit;
  122.   background-color: #fff;
  123. }
  124.  
  125. .empty-todos {
  126.   
  127.   display: flex;
  128.   align-items: center;
  129.   justify-content: center;
  130.   margin-top: 30px;
  131.   gap: 10px;
  132.   animation: enter 0.45s ease-in-out;
  133. }
  134. @keyframes enter {
  135.   0% {
  136.     opacity: 0;
  137.     transform: scale(0.75);
  138.   }
  139.   50%{
  140.     transform: scale(1.15);
  141.   }
  142.   100%{
  143.     opacity: 1;
  144.     transform: scale(1);
  145.   }
  146. }
  147. .empty-todos .msg{
  148.   font-size: 17px;
  149.   padding-top: 5px;
  150.   color: rgba(73, 74, 75, .45);
  151. }
  152. .empty-todos .svg{
  153.   color: rgba(73, 74, 75, .45);
  154.   overflow: visible;
  155.   width: 0.75em;
  156.   font-size: inherit;
  157. }
  158.  
  159. .todo-list{
  160.   
  161.   margin-top: 40px;
  162.   width: 100%;
  163. }
  164. .todo-list .todo-item{
  165.   display: flex;
  166.   align-items: center;
  167.   padding: 8px 10px 8px 0;
  168.   margin-bottom: 10px;
  169.   position: relative;
  170. }
  171.  
  172. .todo-list .todo-text{
  173.   text-align: left;
  174.   width: 300px;
  175.   font-size: 14px;
  176.   overflow: hidden;
  177.   white-space: nowrap;
  178.   text-overflow: ellipsis;
  179. }
  180. .todo-item1 {
  181.   color: #fff;
  182. }
  183.  
  184. .left-icon{
  185.   margin: 0 8px;
  186.   padding: 5px;
  187.   /* border-radius: 3px;
  188.   border: 2px solid #494a4b; */
  189. }
  190. .right-icon{
  191.   position: relative;
  192.   width: 25px;
  193.   margin: 0 0 0 auto;
  194.   cursor: pointer;
  195. }
  196. .footer{
  197.   width: 100%;
  198.   margin-top: 100px;
  199.   display: flex;
  200.   justify-content: space-between;
  201.   font-size: 13px;
  202.   color: #494a4b;
  203.   
  204. }
  205. .footer div{
  206.   cursor: pointer;
  207.   padding: 0 .2em;
  208.   border-radius: 4px;
  209.   
  210. }
  211. .footer-right{
  212.   border-radius: 4px;
  213. }
  214. .footer .span{
  215.   
  216.   cursor: pointer;
  217.   color: #fff;
  218.   background-color: #fe7345;
  219. }
  220. .hidden{
  221.   display: none;
  222.   width: 100%;
  223. }
  224. .todo-template{
  225.   display: none;
  226. }
  227. .todo-item1{
  228.   margin-bottom: 10px;
  229.   cursor: pointer;
  230.   border-radius: 5px;
  231.   display: flex;
  232.   align-items: center;
  233.   padding: 8px 10px 8px 0;
  234.   background-color: #fe7345;
  235.   animation: list .75s ease-in-out both ;
  236. }
  237. @keyframes list {
  238.   0%{
  239.     transform: rotateX(90deg);
  240.     opacity: 0;
  241.   }
  242.   40%{
  243.     transform: rotateX(-10deg);
  244.   }
  245.   70%{
  246.     transform: rotateX(10deg);
  247.   }
  248.   100%{
  249.     transform: rotateX(0deg);
  250.     opacity: 1;
  251.   }
  252. }
  253. .down-box{
  254.   overflow: hidden;
  255.   height: 0;
  256.   position: absolute;
  257.   width: 50px;
  258.   background-color: rgb(76, 76, 76);
  259.   color: #fff;
  260.   list-style: none;
  261.   top: 25px;
  262.   transition: height 0.5s;
  263.   -webkit-transition:height 0.5s;
  264.   z-index: 100;
  265.   border-radius: 5px;
  266.   transition: all 0.2s;
  267. }
  268. .down-box li:hover{
  269.   opacity: .8;
  270. }
  271. .player{
  272.   position: absolute;
  273.   right: 30px;
  274.   top: 200px;
  275.   background-color: pink;
  276.   width: 200px;
  277.   height: 50px;
  278.   display: flex;
  279.   justify-content: space-around;
  280.   align-items: center;
  281.   border-radius: 5px;
  282.   overflow: hidden;
  283.   transition:  width  0.5s;
  284. }
  285. .player .iconfont{
  286.   cursor: pointer;
  287.   font-size: 30px;
  288.   transition: color 0.2s;
  289. }
  290. .player .iconfont:hover{
  291.   color: #fff;
  292. }
  293. audio{
  294.   display: none;
  295. }
  296. .musicing{
  297.   animation: turn 3s linear infinite;
  298.   color: #fff;
  299. }
  300. @keyframes turn {
  301.   0%{
  302.     transform: rotateY(0deg);
  303.   }
  304.   100%{
  305.     transform: rotateY(360deg);
  306.   }
  307. }
  308. .gif{
  309.   position: absolute;
  310.   bottom: 20px;
  311.  
  312. }
  313. .tips{
  314.   display: none;
  315.   background-color: #fff;
  316.   position: absolute;
  317.   left: 80px;
  318.   padding: .3em;
  319.   top: 30px;
  320.   white-space: nowrap;
  321.   border-radius: 5px;
  322. }
  323. .todo-list input{
  324.   border: 0;
  325.   font-size: 14px;
  326.   outline: none;
  327.   background-color: #f2f2f2;
  328.  border-bottom: 2px dashed #494a4b;
  329. }
  330. .date{
  331.   position: absolute;
  332.   font-size: small;
  333.   top: 30px;
  334.   left:30px;
  335.   color:#fe7345;
  336. }
  337. .colud{
  338.   width: 100%;
  339.   top: 0;
  340.   position: absolute;
  341.   z-index: -1;
  342.   display: flex;
  343.   overflow: hidden;
  344. }

2.JS

代码如下（示例）：

  1. window.onload = function () {
  2.   var btn = document.querySelector(".submit-btn");
  3.   var input = document.getElementsByTagName("input")[0];
  4.   var text = document.getElementsByClassName("empty-todos")[0];
  5.   var hidden = document.getElementsByClassName("hidden")[0];
  6.   load();
  7.   footer();
  8.   playMove();
  9.   player();
  10.   aliMove();
  11.   coludMove();
  12.  
  13.   // 点击submit按钮
  14.   btn.onmousedown = function () {
  15.     // 点击按钮后阴影消失
  16.     btn.className = btn.className.replace(" submit-btn1", "");
  17.  
  18.     // 输入框不为空s
  19.     if (input.value.trim()) {
  20.       // 先读取本地存储原来的数据
  21.       var local = getData();
  22.       // 当输入时，先更新数组，再替换本地存储
  23.       local.push({ text: input.value, done: false ,date:getDate()});
  24.       saveData(local);
  25.  
  26.       // 渲染加载数据
  27.       load();
  28.     }
  29.   };
  30.   // 按钮阴影样式
  31.   btn.onmouseup = function () {
  32.     btn.className += " submit-btn1";
  33.   };
  34.  
  35.   // 渲染加载数据
  36.   function load() {
  37.     var todolist = document.querySelector(".todo-list");
  38.     var str = "";
  39.  
  40.     // 读取本地存储
  41.     // 过滤
  42.     var data = fil();
  43.     data.forEach((element, index) => {
  44.       if (element.done) {
  45.         str =
  46.           '<li class="todo-item1"><input type="checkbox" checked class="left-icon"></input><div class="todo-text">' +
  47.           element.text +
  48.           '</div><div class="right-icon" id="' +
  49.           index +
  50.           '"><i class="iconfont del">&#xed1e;</i></div></li>' +
  51.           str;
  52.       } else {
  53.         str =
  54.           '<li class="todo-item"><input type="checkbox" class="left-icon"></input><div class="todo-text">' +
  55.           element.text +
  56.           '</div><div class="right-icon" id="' +
  57.           index +
  58.           '"><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>' +
  59.           str;
  60.       }
  61.     });
  62.  
  63.     input.value = "";
  64.  
  65.     if (str) {
  66.       text.style.display = "none";
  67.       hidden.style.display = "block";
  68.       todolist.innerHTML = str;
  69.     } else {
  70.       text.style.display = "block";
  71.       hidden.style.display = "none";
  72.     }
  73.  
  74.     revise();
  75.     del();
  76.     downBox();
  77.     updata();
  78.   }
  79.  
  80.   //更改状态
  81.   function updata() {
  82.     var left = document.querySelectorAll(".left-icon");
  83.     left.forEach((element) => {
  84.       element.onclick = function () {
  85.         // 获取本地数据
  86.         var data = getData();
  87.  
  88.         //修改数据
  89.         var index = element.parentNode.children[2].getAttribute("id");
  90.         if (element.checked) {
  91.           data[index].done = true;
  92.         } else {
  93.           data[index].done = false;
  94.         }
  95.         // 保存本地存储
  96.         saveData(data);
  97.  
  98.         // 下端变化
  99.         footer();
  100.         select();
  101.  
  102.         // 重新渲染
  103.         load();
  104.       };
  105.     });
  106.   }
  107.  
  108.   // 删除操作
  109.   function del() {
  110.     var del = document.querySelectorAll(".del");
  111.     del.forEach((element) => {
  112.       element.onclick = function () {
  113.         // 先获取本地存储
  114.         var data = getData();
  115.         // 修改数据
  116.         var index = element.parentNode.getAttribute("id");
  117.         data.splice(index, 1);
  118.         // 保存本地
  119.         saveData(data);
  120.         // 重新渲染
  121.         load();
  122.       };
  123.     });
  124.   }
  125.  
  126.   // 双击修改
  127.   function revise() {
  128.     let todoTexts = document.querySelectorAll(".todo-item .todo-text");
  129.     todoTexts.forEach((e) => {
  130.       e.ondblclick = function () {
  131.         //获取存储
  132.         let data = getData();
  133.  
  134.         // 获取点击的id
  135.         let index = e.parentNode.children[2].getAttribute("id");
  136.  
  137.         // 文本变为可编辑
  138.         e.innerHTML='<input type="text" value="'+data[index].text+'"autofocus>';
  139.  
  140.         let input=e.childNodes[0];
  141.  
  142.         // 初始焦点在后边
  143.         input.setSelectionRange(input.value.length,+input.value.length);
  144.  
  145.         // 失去焦点后  修改数组
  146.         e.childNodes[0].onblur=function(){
  147.           
  148.           data[index].text=input.value;
  149.  
  150.           // 存入本地存储
  151.           saveData(data);
  152.  
  153.           e.innerText=data[index].text;
  154.         }
  155.  
  156.  
  157.        
  158.  
  159.         // 修改存储
  160.       };
  161.     });
  162.   }
  163.  
  164.   // 下拉框
  165.   function downBox() {
  166.     let db = document.querySelectorAll(".time");
  167.     let down=document.querySelectorAll('.down-box');
  168.  
  169.  
  170.     down.forEach(e => {
  171.       e.onmouseout=function(){
  172.         e.style.height=0;
  173.       }
  174.     });
  175.    
  176.   
  177.     
  178.     
  179.     db.forEach((element) => {
  180.       element.onclick = function () {
  181.         if (element.parentNode.children[0].style.height) {
  182.           element.parentNode.children[0].style.height = null;
  183.           element.style.color = null;
  184.         } else {
  185.           element.parentNode.children[0].style.height = 50 + "px";
  186.           element.style.color = "gold";
  187.           var li = element.parentNode.children[0].childNodes;
  188.           li[0].onclick = function () {
  189.             element.parentNode.children[0].style.height = null;
  190.  
  191.             timer(15, element.parentNode.getAttribute("id"));
  192.             setTimeout(function () {
  193.               element.style.color = null;
  194.             }, 15000);
  195.           };
  196.           li[1].onclick = function () {
  197.             element.parentNode.children[0].style.height = null;
  198.             timer(60, element.parentNode.getAttribute("id"));
  199.             setTimeout(function () {
  200.               element.style.color = null;
  201.             }, 60000);
  202.           };
  203.         }      
  204.       };
  205.     });
  206.  
  207.     // 失去焦点
  208.    down.forEach(e => {
  209.     e.onblur=function(){
  210.       e.style.height=null;
  211.     }
  212.    });
  213.   }
  214.  
  215.   // 计数器
  216.   function timer(time, index) {
  217.     var data = getData();
  218.     let tip = document.querySelector(".tips");
  219.  
  220.     setTimeout(function () {
  221.       tip.style.display = "block";
  222.       tip.innerText = data[index].text + "时间到了~";
  223.     }, time * 1000);
  224.   }
  225.  
  226.   // 读取本地储存的数据
  227.   function getData() {
  228.     var data = localStorage.getItem("todolist");
  229.     if (data) {
  230.       // 本地储存的数据是字符串格式的 我门需要的是对象格式的
  231.       return JSON.parse(data);
  232.     } else {
  233.       return [];
  234.     }
  235.   }
  236.   //保存本地存储
  237.   function saveData(data) {
  238.     localStorage.setItem("todolist", JSON.stringify(data));
  239.   }
  240.  
  241.   // 表格下端操作
  242.   function footer() {
  243.     // 获取本地存储
  244.     var data = getData();
  245.     // 未完成数目
  246.     var num = 0;
  247.     data.forEach((element) => {
  248.       if (!element.done) {
  249.         num++;
  250.       }
  251.     });
  252.     var footer = document.querySelector(".footer");
  253.     if (num != 0) {
  254.       //存在 完成 未完成
  255.       if (num != data.length) {
  256.         var str =
  257.           '<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>';
  258.       } else {
  259.         var str =
  260.           '<div class="footer-left">item left</div><div class="up all span">All</div>';
  261.       }
  262.     } else {
  263.       if (data.length - num > 0) {
  264.         //有完成的任务
  265.         var str =
  266.           '<div class="footer-left">item left</div><div class="up all span">All</div><div class="up clear">Clear completed</div>';
  267.       } else {
  268.         var str =
  269.           '<div class="footer-left">item left</div><div class="up all span">All</div>';
  270.       }
  271.     }
  272.     footer.innerHTML = str;
  273.     // select();
  274.  
  275.     var itemLeft = document.querySelector(".footer-left");
  276.     itemLeft.innerText = num + " item left";
  277.   }
  278.  
  279.   // 按钮切换
  280.   function select() {
  281.     var data = getData();
  282.     var num = 0;
  283.     data.forEach((element) => {
  284.       if (!element.done) {
  285.         num++;
  286.       }
  287.     });
  288.     var up = document.querySelectorAll(".up");
  289.     // 切换选中
  290.     up.forEach((element) => {
  291.       element.onclick = function () {
  292.         // 删除选中
  293.         up.forEach((element) => {
  294.           element.className = element.className.replace(" span", "");
  295.         });
  296.         // 添加选中
  297.         element.className += " span";
  298.         //渲染
  299.         load();
  300.       };
  301.     });
  302.   }
  303.  
  304.   //过滤
  305.   function fil() {
  306.     var data = getData();
  307.     var arr = [];
  308.     // 选中all
  309.     if (document.querySelector(".active.span")) {
  310.       arr = data.filter((item) => item.done == false);
  311.     } else if (document.querySelector(".comp.span")) {
  312.       arr = data.filter((item) => item.done == true);
  313.     } else if (document.querySelector(".clear.span")) {
  314.       clear();
  315.       footer();
  316.       arr = getData();
  317.     } else {
  318.       arr = data;
  319.     }
  320.  
  321.     return arr;
  322.   }
  323.  
  324.   // 清除
  325.   function clear() {
  326.     // 获取本地存储
  327.     var data = getData();
  328.     // 删除已完成的
  329.     data = data.filter((item) => item.done == false);
  330.     // 存入本地存储
  331.     saveData(data);
  332.   }
  333.  
  334.   // 悬浮窗移动
  335.   function playMove() {
  336.     var player = document.querySelector(".player");
  337.     var canMove;
  338.     var change;
  339.  
  340.     // 鼠标点击时坐标
  341.     var x = 0;
  342.     var y = 0;
  343.     player.onmousedown = function (e) {
  344.       canMove = true;
  345.       x = e.pageX - player.offsetLeft;
  346.       y = e.pageY - player.offsetTop;
  347.     };
  348.     player.onmouseup = function () {
  349.       canMove = false;
  350.       flexing();
  351.     };
  352.     player.onblur = function () {
  353.       canMove = false;
  354.       flexing();
  355.     };
  356.     player.onmousemove = function (e) {
  357.       if (canMove) {
  358.         // 点击时坐标之差与移动时相等
  359.         // x轴：px2-px1=mx2-mx1;
  360.         let left = e.pageX - x;
  361.         let top = e.pageY - y;
  362.  
  363.         if (left < 0) left = 0;
  364.         if (top < 0) top = 0;
  365.         let maxLeft = innerWidth - player.offsetWidth;
  366.         let maxTop = innerHeight - player.offsetHeight;
  367.         if (left >= maxLeft) left = maxLeft;
  368.         if (top >= maxTop) top = maxTop;
  369.  
  370.         player.style.left = left + "px";
  371.         player.style.top = top + "px";
  372.       }
  373.     };
  374.  
  375.     // 伸缩
  376.     function flexing() {
  377.       // 距离右边伸缩距离
  378.       let d = 20;
  379.       if (!canMove && !change) {
  380.         let x = window.innerWidth - d - player.offsetWidth;
  381.         if (player.offsetLeft >= x) {
  382.           player.style.width = 10 + "px";
  383.           player.style.left = innerWidth - 10 + "px";
  384.           change = true;
  385.         }
  386.       }
  387.       // 伸
  388.       player.onmouseover = function () {
  389.         if (change) {
  390.           player.style.width = 200 + "px";
  391.           player.style.left = innerWidth - 210 + "px";
  392.           change = false;
  393.         }
  394.       };
  395.     }
  396.   }
  397.  
  398.   // 音乐播放
  399.   function player() {
  400.     // 当前播放索引
  401.     var index = 0;
  402.  
  403.     // 播放状态
  404.     let aired = false;
  405.  
  406.     let audios = document.querySelectorAll(".player audio");
  407.     let music = document.querySelector(".music");
  408.     let above = document.querySelector(".above");
  409.     let play = document.querySelector(".play");
  410.     let next = document.querySelector(".next");
  411.  
  412.     above.onclick = function () {
  413.       index--;
  414.       playing(index);
  415.     };
  416.  
  417.     next.onclick = function () {
  418.       index++;
  419.       console.log(index);
  420.       playing(index);
  421.     };
  422.  
  423.     play.onclick = function () {
  424.       if (!aired) {
  425.         play.innerHTML = '<i class="iconfont">&#xea81;</i>';
  426.         aired = true;
  427.         playing(index);
  428.       } else {
  429.         play.innerHTML = '<i class="iconfont">&#xe6a4;</i>';
  430.         aired = false;
  431.         stop(index);
  432.       }
  433.     };
  434.  
  435.     // 播放
  436.     function playing() {
  437.       if (index < 0) {
  438.         index = audios.length - 1;
  439.       }
  440.       if (index > audios.length - 1) {
  441.         index = 0;
  442.       }
  443.  
  444.       // 格式化所有音频
  445.       audios.forEach((e) => {
  446.         e.load();
  447.       });
  448.       play.innerHTML = '<i class="iconfont">&#xea81;</i>';
  449.       aired = true;
  450.       music.className = "musicing";
  451.       audios[index].play();
  452.       audios[index].addEventListener("ended", function () {
  453.         index++;
  454.         playing(index);
  455.       });
  456.     }
  457.  
  458.     // 暂停
  459.     function stop(index) {
  460.       audios[index].pause();
  461.       music.className = "music";
  462.     }
  463.   }
  464.  
  465.   // 清除tips
  466.   function removeTips() {
  467.     let gif = document.querySelector(".gif");
  468.     let tip = document.querySelector(".tips");
  469.     gif.onclick = function () {
  470.       tip.style.display = "none";
  471.     };
  472.   }
  473.  
  474.   // 阿里移动
  475.   function aliMove() {
  476.     let right = 0;
  477.     let ali = document.querySelector(".gif");
  478.     setInterval(function () {
  479.       right += 2;
  480.       if (right > 1500) right = 0;
  481.       ali.style.right = right + "px";
  482.     }, 10);
  483.     removeTips();
  484.   }
  485.  
  486.   // 当前日期
  487.   function getDate(){
  488.     let date=new Date();
  489.  
  490.     let year=date.getFullYear();
  491.     let month=date.getMonth()+1;
  492.     let d=date.getDate();
  493.     let hours=date.getHours();
  494.     let min=date.getMinutes();
  495.     let s=year+'/'+month+'/'+d+'/'+ hours+'/'+min;
  496.     return s;
  497.   }
  498.  
  499.   // 云
  500.   function coludMove(){
  501.     let colud=document.querySelector('.colud div');
  502.     console.log(colud.offsetWidth);
  503.     let left=-1699;
  504.  
  505.     setInterval(function(){
  506.       left+=0.25;
  507.       if(left==0)left=-1699;
  508.       colud.style.marginLeft=left+'px';
  509.     },10)
  510.   }
  511. };

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

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

  

闽ICP备14008679号