案例作品预览图
仅储存案例使用
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" href="../案例清单-作品/ToDoList.css">
<title>JavaScript小清单</title>
</head>
<body>
<div class="container clearfix">
<div class="header">
<h1><img src="photos/待办事项.png" alt=""> 待办事项</h1>
<div class="left-header">
<div class="day">
<h2>现在时间：</h2>
<p id="data">2022年6月15日 周三 </p>
<p class="time">08:00:00</p>
</div>
</div>
<div class="right-header">
<div class="topic">
选择主题：
<select name="选择主题" id="select">
<option value="skyblue" class="skyblue">天蓝色</option>
<option value="white" class="white">白色</option>
<option value="grey" class="grey">灰色</option>
<option value="pink" class="pink">粉色</option>
<option value="yellowgreen" class="yellowgreen">黄绿色</option>
</select>
</div>
<div class="back-img">
<button id="changeBackImg">
切换背景图片
</button>
</div>
<div class="carousel">
<ul class="clearfix" id="scroll">
<li><img src="photos/b1.jpg" alt=""></li>
<li><img src="photos/b2.jpg" alt=""></li>
<li><img src="photos/b3.jpg" alt=""></li>
<li><img src="photos/b4.jpg" alt=""></li>
<li><img src="photos/b1.jpg" alt=""></li>
<li><img src="photos/b2.jpg" alt=""></li>
<li><img src="photos/b3.jpg" alt=""></li>
<li><img src="photos/b4.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="new-task">
<h3>新任务</h3>
<div class="new-content">
<img id="img-add" src="photos/add1.png" alt="">
<input id="input" type="text" placeholder="请输入新的待办事项">
<button id="add">添加</button>
</div>
</div>
<div class="todo-list">
<h2><img src="photos/未完成.png" alt=""> 未完成任务</h2>
<div class="todo-number"></div>
<hr>
<div class="todo-main">
</div>
</div>
<div class="done-list">
<h2><img src="photos/已完成.png" alt="">已完成任务</h2>
<div class="done-number"></div>
<hr>
<div class="done-main"></div>
</div>
</div>
<div class="todo-example">
<div class="todo-item">
<div class="circle">
<img class="unaccomplished" src="photos/circle1.png" alt="">
</div>
<div class="todo-content">
<div contenteditable="true" class="todo-text">下班去拿快递</div>
<div class="todo-type">任务</div>
</div>
<div class="timing" id="ding" name="ding">定时
<select name="timing" id="timing">
<option value="null" class="null" >请选择</option>
<option value="1" class="1min" >1分钟 </option>
<option value="5" class="5min">5分钟</option>
<option value="10" class="10min">10分钟</option>
<option value="60" class="1h">1小时 </option>
<option value="120" class="2h">2小时 </option>
</select>
</div>
<div class="delay" id="yan">延时
<input type="text" id="delayTime" disabled>分
</div>
<div class="sign">
<img class="star1" src="photos/important1.png" alt="">
<img class="del" src="photos/删除.png" alt="">
</div>
</div>
</div>
<script src="../案例清单-作品/ToDoList.js"></script>
</body>
</html>CSS代码
body{
margin: 0;
padding: 0;
display: block;
color: rgb(0, 0, 0);
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
a,a:hover{
text-decoration: none;
color: #000000;
}
.container{
padding: 0 25px;
margin: 20px auto;
width: 1200px;
height: auto;
position: relative;
border-radius: 25px;
border: 3px rgb(0, 0, 0) solid;
border-bottom: none;
background-size: cover;
background-color: skyblue;
box-shadow: 20px 20px 20px rgb(103, 102, 102) ;
}
.header{
margin: bottom 20px ;
}
.header h1{
display: flex;
align-items: center;
justify-content: center;
}
.header h1 img{
width: 52px;
align-items: center;
}
h2{
display: flex;
align-items: center;
justify-content: center;
}
h2 img{
width: 40px;
align-items: center;
}
.header .day{
display: flex;
align-items: center;
}
.header .right-header{
float: right;
position: absolute;
top: 40px;
right: 55px;
}
.right-header .back-img{
margin-left: 73px;
margin-top: 20px;
}
.right-header .back-img button{
height: 30px;
}
.right-header .carousel{
margin-top: 20px;
margin-left: -32px;
width: 200px;
height: 62.5px;
overflow: hidden;
position: relative;
border: 2px rgb(255, 0, 187) solid;
}
.right-header .carousel ul{
width: 800px;
position: relative;
}
.right-header .carousel ul li{
float: left;
}
.right-header .carousel img{
width: 100px;
height: 62.5px;
}
.new-content{
display: flex;
align-items: center;
}
.new-task{
border-bottom: 1px solid rgb(192, 192, 192);
margin-bottom: 20px;
}
.new-task #img-add{
height: 30px;
width: 30px;
margin-right: 20px;
}
.new-task #input{
vertical-align: middle;
border: none;
border-radius: 20px;
width: 750px;
height: 50px;
font-size: 15px ;
}
.new-task #add{
margin-left: 10px;
height: 30px;
width: 55px;
border-radius: 10px;
cursor: pointer;
}
.todo-list{
width: 49%;
float: left;
position: relative;
border-radius: 10px;
border: 2px #000000 solid;
/* box-shadow: 10px 10px 10px rgb(103, 102, 102) ; */
margin-bottom: 20px;
}
.done-list{
width: 49%;
float: right;
position: relative;
border-radius: 10px;
border: 2px #000000 solid;
/* box-shadow: 10px 10px 10px rgb(103, 102, 102) ; */
margin-bottom: 20px;
}
.todo-item{
position: relative;
display: flex;
align-items: center;
border-bottom: 1px solid rgb(192, 192, 192);
padding-top: 8px;
padding-bottom: 8px;
animation: sli 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 1;
}
.todo-content{
padding-left: 35px;
width: 270px;
}
.todo-item .todo-content .todo-text{
font-size: 20px;
}
.todo-content .todo-type{
font-size: 12px;
color:rgb(167, 163, 163) ;
}
.circle,.sign{
display: flex;
/* 居中显示 */
align-items: center;
}
.circle{
margin-left: 5px;
float: left;
position: absolute;
top: 17px;
}
.timing,.delay{
font-size: 14px;
margin-right: 9px;
}
.delay input{
width: 20px;
}
.sign{
float: right;
position: absolute;
right: 0;
top: 15px;
}
.todo-item img{
height: 25px;
cursor: pointer;
}
.todo-item .sign img{
margin-right: 16px;
}
.todo-example{
display: none;
}
/* 完成数，未完成数 */
.todo-number{
position: absolute;
top: 23px;
right: 28px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 100%;
font-size: 18px;
font-weight: bold;
background-color: rgb(228, 228, 228);
}
.done-number{
position: absolute;
top: 23px;
right: 28px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 100%;
font-size: 18px;
font-weight: bold;
background-color: rgb(228, 228, 228);
}
@keyframes sli{
0%{
left: -300px;
}
100%{
left:0px
}
}
.clearfix::before {
content: "";
display: table;
}
.clearfix::after{
content: '';
clear: both;
display: block;
}JS代码
window.onload = function () {
//初始化方法
Day();
starOnclick();
delOnclik();
change();
// circleOnclick();
changeBackImg();
todoNumber();
doneNumber();
prevent();
Carousel();
//年月日 周几
function Day() {
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth() + 1;
var data = t.getDate();
var weekday = new Array(7);
var day = t.getDay();
weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
document.getElementById('data').innerHTML = year + "年" + month + "月" + data + "日 " + weekday[day] + "  ";
}
//时间跳动
var time = setInterval(function () {
timer()
}, 1000);
function timer() {
var t = new Date();
var hour = t.toLocaleTimeString();
document.querySelector(".time").innerHTML = hour;
}
//回车键添加任务
var input = document.getElementById('input');
input.onkeydown = function (event) {
if (event.keyCode == 13) {
addNew();
}
}
//给添加按钮添加功能
var add = document.getElementById('add');
add.onclick = function () {
addNew();
}
//封装添加新任务方法
function addNew() {
let task = input.value;
if (task.trim() == '') {
alert("！！！请输入任务！！！");
input.value = '';
} else {
let example = document.querySelector('.todo-example');
let newTask = example.cloneNode(true);
//复制节点 ture可以复制该节点内的节点，false则只复制该节点
//通过newTask找到example中的todo-item
let newTaskNode = newTask.querySelector('.todo-item');
newTaskNode.querySelector(".todo-text").innerText = task;
var del=newTask.querySelector('.del');
del.style.display='none';
// console.log(newTaskNode);
// document.getElementsByClassName('todo-item')[0].style.animation=' sli 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 1';
//将输入的task加到未完成的第一个任务
let firstTodo = document.querySelector('.todo-list .todo-item');
document.querySelector('.todo-main').insertBefore(newTaskNode, firstTodo);
//添加之后，输入框变为空
input.value = '';
// circleOnclick();
}
//点击圆圈完成任务
var staus = null;
var todo = document.querySelector('.unaccomplished');
todo.onclick = function (event) {
// var staus =1;
var timingSelect = todo.parentElement.parentElement;
var timing = timingSelect.querySelector('.timing');
var delayTime = timingSelect.querySelector('.delay');
var del=timingSelect.querySelector('.del');
if (todo.src.includes("circle1")) {
//判断是否完成
staus = 2;
//点击切换已完成
todo.setAttribute('src', 'photos/circle2.png');
//点击圆圈，任务加横线
let todoText = todo.parentElement.parentElement.querySelector('.todo-text');
// todoText.style.textDecoration='line-through';
todoText.setAttribute('style', 'color:grey;text-decoration: line-through;');
// var timingSelect = todo.parentElement.parentElement;
// var timing = timingSelect.querySelector('.timing');
// var delayTime = timingSelect.querySelector('.delay');
timing.style.display = 'none';
delayTime.style.display = 'none';
del.style.display='block';
//将输入的task加到已完成的任务
document.querySelector('.done-main').appendChild(todo.parentElement.parentElement);
// console.log(timingSelect);
todoNumber();
doneNumber();
} else {
staus = 1;
//点击切换未完成
todo.setAttribute('src', 'photos/circle1.png');
//点击圆圈，任务取消横线
let todoText = todo.parentElement.parentElement.querySelector('.todo-text');
// todoText.style.textDecoration='none';
todoText.setAttribute('style', 'text-decoration=none;');
// var timingSelect = todo.parentElement.parentElement;
// var timing = timingSelect.querySelector('.timing');
// var delayTime = timingSelect.querySelector('.delay');
timing.style.display = 'block';
delayTime.style.display = 'block';
del.style.display='none';
//将任务添加到未完成
//将输入的task加到未完成的第一个任务
let firstTodo = document.querySelector('.todo-list .todo-item');
document.querySelector('.todo-main').insertBefore(todo.parentElement.parentElement, firstTodo);
// console.log(timingSelect);
todoNumber();
doneNumber();
}
}
//定时功能
var timingSelect = document.querySelector('#timing');
var delayTime = document.querySelector('#delayTime');
var tim = 0;
var delayTim = 0;
//定义未定时的状态为0
var state = 0;
timingSelect.onchange = function () {
tim = timingSelect.value;
// console.log(tim);
if (state == 0) {
var timeOut = setInterval(() => {
console.log(tim);
tim--;
if (tim == 0) {
console.log(staus);
clearInterval(timeOut);
let a = confirm("定时时间已到！如果未完成清单任务，请确认是否使用延时功能。");
if (a == true) {
delayTime.removeAttribute('disabled');
//延时功能
//延时回车确定时间，实现功能
delayTime.onkeydown = function (event) {
if (event.key == 'Enter') {
//阻止默认
// console.log(11111);
event.preventDefault();
//让元素失去焦点
this.blur();
delayTim = delayTime.value;
// console.log(delayTim);
setTimeout(() => {
alert("延时时间已到！");
let it = timingSelect.parentElement.parentElement;
let todo = it.querySelector('.unaccomplished');
todo.setAttribute('src', 'photos/circle2.png');
//点击圆圈，任务加横线
let todoText = it.querySelector('.todo-text');
todoText.setAttribute('style', 'color:grey;text-decoration: line-through;');
timingSelect.parentElement.style.display = 'none';
delayTime.parentElement.style.display = 'none';
todo.style.display = 'none';
//将输入的task加到已完成的任务
document.querySelector('.done-main').appendChild(it);
todoNumber();
doneNumber();
}, 1000 * delayTim);
}
}
} else {
alert("您已完成该任务，继续加油吧！");
let it = timingSelect.parentElement.parentElement;
let todo = it.querySelector('.unaccomplished');
todo.setAttribute('src', 'photos/circle2.png');
//点击圆圈，任务加横线
let todoText = it.querySelector('.todo-text');
todoText.setAttribute('style', 'color:grey;text-decoration: line-through;');
timingSelect.parentElement.style.display = 'none';
delayTime.parentElement.style.display = 'none';
todo.style.display = 'none';
//将输入的task加到已完成的任务
document.querySelector('.done-main').appendChild(it);
todoNumber();
doneNumber();
}
}
if (staus == 2) {
clearInterval(timeOut);
}
}, 1000);
state = 1;
} else {
alert("您已定时，请勿重复定时！");
tim=0;
clearInterval(timeOut);
}
}
starOnclick();
delOnclik();
todoNumber();
doneNumber();
prevent();
// fixTime();
}
//点击星星，使星星变化
function starOnclick() {
var stars = document.querySelectorAll('.star1');
stars.forEach(function (star) {
star.onclick = function () {
if (star.src.includes('2')) {
star.setAttribute('src', 'photos/important1.png');
} else {
star.setAttribute('src', 'photos/important2.png');
}
}
})
}
//删除操作
function delOnclik() {
var dels = document.querySelectorAll('.del');
dels.forEach(function (del) {
del.onclick = function () {
let c = confirm("您确认删除此项记录吗？");
if (c == true) {
del.parentElement.parentElement.remove();
}
todoNumber();
doneNumber();
tim=0;
}
})
}
//切换主题
function change() {
let select = document.querySelector('#select');
select.onchange = function () {
let color = select.value;
let container = document.querySelector('.container')
container.setAttribute('style', 'background-color: ' + color + ';');
}
}
//改变背景功能
function changeBackImg() {
var changeBack = document.getElementById('changeBackImg');
var i = 1;
changeBack.onclick = (() => {
let container = document.querySelector('.container');
container.setAttribute('style', 'background-image: url(photos/b' + i + '.jpg);');
// i++;
if (i < 4) {
i++;
} else {
i = 1;
}
})
}
//未完成数与完成数
function todoNumber() {
let num = document.querySelector('.todo-main').children.length;
document.querySelector('.todo-number').innerHTML = num;
}
function doneNumber() {
let num = document.querySelector('.done-main').children.length;
document.querySelector('.done-number').innerHTML = num;
}
//编辑时阻止回车键
function prevent() {
var toText = document.querySelector('.todo-text');
toText.onkeydown = function (event) {
if (event.key == 'Enter') {
//阻止默认
event.preventDefault();
//让元素失去焦点
this.blur();
}
}
}
let CarouselTimer = 0;
function Carousel() {
var scroll = document.getElementById('scroll');
var timer = setInterval(function timerr() {
CarouselTimer--;
scroll.setAttribute('style', 'left:' + CarouselTimer + "px;");
if (CarouselTimer == -400) {
CarouselTimer = 0;
}
}, 12);
scroll.onmouseover = function () {
clearInterval(timer);
}
scroll.onmouseout = function () {
Carousel();
}
}
}书写时有参考视频等他人创意，且部分代码过于繁杂，没有进行优化，有一点小BUG，不影响使用。
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
