项目预览图:
项目为静态网页,源码如下:
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”获取