JS + HTML + CSS 实现Todolist

原创已于 2022-11-14 08:36:52 修改 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

于 2022-11-10 22:33:04 首次发布

本文作者分享了初学JavaScript时制作的一个包含动态Todolist、音乐播放器、背景动画和定时提醒功能的网页应用。Todolist支持任务添加、进度筛选，音乐播放器可切换歌曲，背景有移动的云朵和阿狸元素，到期任务阿狸会进行提醒。源代码包括HTML、CSS和JavaScript，展示了完整的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

目录

文章目录

前言

一、效果展示

二、代码

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">
          <svg
            class="svg"
            aria-hidden="true"
            focusable="false"
            data-prefix="fas"
            data-icon="cliphoard-check"
            role="img"
            viewBox="0 0 384 512"
          >
            <path
              fill="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", "");

    // 输入框不为空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 =
          '<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();

        // 获取点击的id
        let 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 = [];
    // 选中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 = '<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";
    }
  }

  // 清除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)
  }
};