【web前端】Todolist练手小项目（假面骑士空我主题）

本文链接：https://blog.csdn.net/NEXT00/article/details/132496145

项目预览图：
在这里插入图片描述
项目为静态网页，源码如下：
index.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">
    <title>ToDoList</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="top"><img src="./pics/front.jpg" alt="" srcset=""></div>
    <div class="banner">
        <h2>
            ToDoList
        </h2>
    </div>
    <div class="father">
        <div class="leftChild">
            <!-- <h3>用户登录</h3>
            <input type="text" name="username" id="username">
            <input type="text" name="password" id="password">
            <button>登录</button>
            <button>注册</button> -->
            <h3>nowTime</h3>
            <h4>添加任务</h4>
            <input type="text" name="" id="addMission" style="height:30px;width: 200px;" >
            <div id="show">
                <img src="./pics/3.jpg" alt="" srcset="" style="height: 200px;">
            </div>
            
        </div>
        <div class="rightChild">
            <div class="head">
                <h3>待完成任务</h3>
            </div>
            <div >
                <ul class="undo"></ul>
            </div>
            <div class="tail">
                <h3>已完成任务</h3>
                
            </div>
            <div >
                <ul class="did">
                    <!-- <li>
                        <p>
                        任务4
                        </p>
                        <input type="checkbox" name="" id="">
                    </li> -->
                   
                </ul>
            </div>
        </div>
    </div>
    <div class="footer"><p>
        作者：NEXT00
    </p></div>
    <script src="./control.js"></script>
</body>
</html>

style.css


*{
    margin: 0;
    padding: 0;
    color: khaki;
}
a{
    text-decoration: none;
}
ul{
    text-decoration: none;
    list-style: none;
}
div{
    border: 1px black solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.top{
    height: 100px;
    background-color: brown;
    overflow: hidden;
}
.top>img{
    width: 100%;
}
.banner{
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: brown;
}

.father{
    height: 500px;
    width: 100%;
    position: absolute;
    display: flex;
    /* 水平居中 */
    /* justify-content: center; */
    /* 垂直居中 */
    /* align-items: center; */
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
    border: 0;
}
.leftChild{
    width: 300px;
    border-right: 1px black solid;
    text-align: center;
    background-color:brown ;
}
.leftChild>*{
    margin-top: 40px;
}
/* .leftChild>input {
    display: block;
    width: 170px;
    margin-left: 10px;
    border-radius: 4px;
}

.leftChild>button{
    border-radius: 4px;
    width: 50px;
}
.leftChild>button:hover{
    color: brown;
} */

#show{
    height: 200px;
    border: 1px brown solid;
    overflow: hidden;
    background-color: antiquewhite;
}
.rightChild{
    overflow: hidden;
    width: 1300px;
}
.rightChild>.head,.rightChild>.tail{
    background-color: brown;
}
.rightChild h3{
    margin-left: 20px;
    line-height: 50px;
    height:50px;
}
.rightChild li{
    position: relative;
    border:1px antiquewhite solid;
}
.rightChild li p {
    color: brown;
    height:40px;
    line-height: 40px;
    margin-left: 20px;
}
.rightChild li input {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 14px;
}
.rightChild li:hover{
    background-color: antiquewhite;
}
.footer{
    text-align: center;
    line-height: 50px;
    background-color: brown;
    position: fixed;
    border-top: 1px black solid;
    width: 100%;
    bottom: 0;
    height: 50px;
}

control.js

let box = document.getElementById("show");
// console.log(box);
var img = box.querySelector("img");
var index = 1;
var timer = setInterval(function () {
  img.src = "./pics/" + index + ".jpg";
  index++;
  if (index > 11) {
    index = 1;
  }
}, 3000);
// console.log(img.src);
var key = "zzy";
var missions = getLocal(key);

let box2 = document.getElementsByClassName("leftChild");
// console.log(box2);
let nowTime = document.querySelector(".leftChild>h3");
// console.log(nowTime);

var now = nowTime.innerHTML;
// console.log(now);
let getNow = function () {
  let year;
  let month;
  let week;
  let day;
  let Week = [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日",
  ];
  let Month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  let date = new Date();
  day = date.getDate();
  year = date.getFullYear();
  month = date.getMonth();
  week = date.getDay();
  return (
    "" +
    year +
    "年" +
    (month + 1) +
    "月" +
    day +
    "日" +
    "[" +
    Week[week - 1] +
    "]"
  );
};
nowTime.innerHTML = getNow();

let inputs = document.querySelectorAll(".rightChild li");
// console.log("x"+inputs);
let undo = document.querySelector(".undo");
let did = document.querySelector(".did");
// console.log(undo.childNodes.length);

let addMission = document.getElementById("addMission");
// console.log(addMission);

//获取本地存储任务表，更新数据
function updateMission(key) {
  let obj = getLocal(key);
  for (i in obj) {
    // console.log("i is " + obj[i]);
    undo.innerHTML +=
      "<li><p>" + obj[i] + '</p><input type="checkbox" name="" id=""></li>';
  }
}
updateMission(key);

addMission.addEventListener("keydown", addNewMission);
function addNewMission(e) {
  if (e.keyCode == 13) {
    // console.log("按下回车"+addMission.value);
    undo.innerHTML +=
      "<li><p>" +
      addMission.value +
      '</p><input type="checkbox" name="" id=""></li>';
    for (j in missions) {
      if (missions[j] == addMission.value) {
        alert("任务重复！");
      }
    }
    missions.push(addMission.value);
    //清空输入框
    addMission.value = "";
    saveLocal("zzy", missions);
    finishMission();
  }
}

//任务勾选完成逻辑
function finishMission() {
  let notDo = document.querySelectorAll(".rightChild li");

  for (let i = 0; i < notDo.length; i++) {
    // console.log(notDo[i].innerHTML);
    notDo[i].querySelector("input").addEventListener("change", function () {
      if (this.checked) {
        // console.log("Checked!");
        for (j in missions) {
          if (missions[j] == notDo[i].querySelector("p").innerHTML) {
            // console.log("will delete ", j);
            missions.splice(j, 1);
            // console.log(missions);
            break;
          }
        }
        saveLocal("zzy", missions);

        undo.removeChild(notDo[i]);
        did.appendChild(notDo[i]);
      } else {
        missions.push(notDo[i]);
        // console.log(missions);
        did.removeChild(notDo[i]);
        undo.appendChild(notDo[i]);
        saveLocal("zzy", missions);
      }
    });
  }
}

finishMission();

//本地存储保存以及获取
function saveLocal(key, obj) {
  localStorage.setItem(key, JSON.stringify(obj));
}
function getLocal(key) {
  return JSON.parse(localStorage.getItem(key));
}

// var m2 = getLocal("zzy");
// console.log("m2"+m2);

图片素材来自互联网，空我图片请自行去bilibili搜索“空我sic”获取