技术栈
HTML,CSS,JS
实现思路
基于h5+css的静态页面实现,和JS对DOM和BOM的操作来实现的todolist小案例
作品展示
拥有添加功能,已完成功能,定时功能(删除功能暂时没有,想要的同学可以看一下我的其它博客,在jQuery实现的todolist里有删除功能)
直接上代码
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>Document</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./fa/css/all.css">
<link rel="stylesheet" href="./icon/iconfont.css">
<script src="./index.js"></script>
</head>
<body>
<div class="wrapper w">
<!-- 设置头部 -->
<div class="nei_wrapper clearfix">
<div class="head_wrapper nei_w">
<!-- 设置头部左边 -->
<div class="head_left">
<h1>我的一天</h1>
<div class="ltime">
五月 17日 星期日
</div>
</div>
<!-- 设置头部右边 -->
<div class="head_right">
<div class="rtime">今天</div>
</div>
</div>
<!-- 设置todolist的边框 -->
<div class="todolist_wrapper nei_wrapper">
<!-- 设置添加框 -->
<div class="intodo nei_wrapper">
<i class="fas fa-plus"></i>
<input type="text" name="" id="" placeholder="添加任务" class="shuru">
</div>
<!-- 设置主要内容框 -->
<!-- 设置工作框 -->
<div class="do_list"></div>
<div class="done_list">
<div class="done_ke">
<!-- 设置输入框 -->
<input type="checkbox" class="check">
<input type="text" name="" id="" class="inp">
<!-- 收藏 -->
<div class="xing">
<a href="javaScript:;" class="xinga">
<i class="iconfont"></i>
</a>
</div>
<!-- 定时 -->
<div class="dingshi">
<a href="javaScript:;">定时</a>
</div>
<!-- 定时上拉框 -->
<div class="dingshi_list">
<ul>
<li>
<a href="javaScript:;">01分钟</a>
</li>
<li>
<a href="javaScript:;">30分钟</a>
</li>
<li>
<a href="javaScript:;">01小时</a>
</li>
<li>
<a href="javaScript:;">5小时</a>
</li>
<li>
<a href="javaScript:;">24小时</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
CSS部分
/* 消除页面塌陷和外边距重叠 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
*{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
.w{
width: 1000px;
height: 500px;
}
.neiw{
width: 800px;
}
/* 设置大边框 */
.wrapper{
margin: 50px auto;
border: 2px solid #cbcbcb;
}
/* 设置内容边框 */
.nei_wrapper{
width: 950px;
margin: 0 auto;
/* background-color: yellow; */
}
/* 设置头部边框 */
.head_wrapper{
margin: 0 auto;
margin-top: 25px;
/* height: 20px; */
/* background-color: pink; */
}
/* 设置头部左边 */
.head_left{
float: left;
/* color: #464547; */
}
.head_left h1{
color: #464547;
font-size: 31px;
}
.ltime{
color: #b6bcbe;
}
/* 设置头部右边 */
.head_right{
float: right;
position: relative;
}
.head_right i{
position: absolute;
top: 0;
left: -90px;
color: #8e908f;
}
.head_right .rtime{
position: absolute;
width: 40px;
top: 0;
left: -60px;
color: #8e908f;
}
.head_right .updown{
position: absolute;
top: 0;
left: 0;
color: #8e908f;
}
/* 设置todolist */
.todolist_wrapper{
margin-top: 115px;
/* background-color: pink; */
}
/* 设置添加框 */
.intodo{
position: relative;
/* background-color: pink; */
padding-bottom: 10px;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 10px;
}
.intodo i{
position: absolute;
font-size: 20px;
color: #a6a6a6;
/* line-height: 20px; */
top: 2px;
left: 5px;
}
.intodo input{
margin-left: 25px;
height: 25px;
width: 850px;
border: none;
outline: none;
}
/* 设置主要内容框 */
.do_list{
position: relative;
padding-bottom: 10px;
margin-bottom: 30px;
}
.done_ke{
position: relative;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 20px;
border-top: none;
}
.do_list .yin{
display: none;
}
.done_list{
display: none;
position: relative;
padding-bottom: 10px;
margin-bottom: 30px;
}
.do_list .check{
position: absolute;
top: 6px;
left: 8px;
/* border-radius: 50%; */
}
.do_list .inp{
margin-left: 50px;
height: 25px;
width: 850px;
/* width: 100%; */
border: none;
outline: none;
color: #333;
text-decoration: none;
}
.do_list .xing{
position: absolute;
top: -1px;
right: 8px;
/* color: yellow; */
}
/* 设置定时 */
.dingshi{
width: 50px;
height: 20px;
position: absolute;
top: -1px;
right: 30px;
text-align: center;
background-color: none;
/* box-shadow: #464547 2px 2px 10px; */
}
.dingshi a{
line-height: 20px;
color: #b6c2d5;
}
/* 设置定时框 */
.dingshi_list{
display: none;
position: absolute;
top: -115px;
right: 28px;
box-shadow: #464547 2px 2px 10px;
background-color: #fff;
}
.dingshi_list li{
/* width: 100px; */
height: 20px;
margin: 2px;
/* float: left; */
}
.dingshi_list li:hover{
background-color: #edf0f1;
}
js部分
window.addEventListener('load', function(){
// console.log(123);
// 记录输入内容
var shuru = document.querySelector('.shuru');
var done_ke = document.querySelector('.done_ke');
var done_list = document.querySelector('.done_list');
var do_list = document.querySelector('.do_list');
var xing = document.querySelector('.xinga');
var dingshi = document.querySelector('.dingshi');
document.addEventListener('keyup',function(e){
// 按下回车键且文本内容不为空时
if(e.key=='Enter'&&shuru.value!=''){
// 克隆需要复制的部分
var lili = done_ke.cloneNode(true);
// console.log(lili);
// 获取输入框的内容
var nei = shuru.value;
// 把输入框的内容改为空
shuru.value = '';
// 新创建的框中添加获取的输入框内容
lili.children[1].value = nei;
// 把克隆的部分添加到最上面
do_list.insertBefore(lili,do_list.children[0]);
// 在新建一行内容后,给内容添加点击事件
lili.children[0].addEventListener('click', function(){
if(this.checked){
// 添加到最下面
do_list.appendChild(lili);
// 字体变色
lili.children[1].style.color = '#a6a6a6';
// 添加下划线
lili.children[1].style.textDecoration = 'line-through double';
}else{
// 添加到最上面
do_list.insertBefore(lili,do_list.children[0]);
// 字体变色
lili.children[1].style.color = '#333';
// 删除下划线
lili.children[1].style.textDecoration = 'none';
}
})
// 设置点击收藏事件
var num1 = 0;
lili.children[2].addEventListener('click', function(){
if(num1 == 0){
// 改变字符以及颜色
this.children[0].children[0].innerHTML = '';
this.children[0].children[0].style.color = 'red';
num1 = 1;
}else if(num1 == 1){
// 变回来
num1 = 0;
this.children[0].children[0].innerHTML = '';
this.children[0].children[0].style.color = 'none';
}
})
// 设置定时事件
// 鼠标经过时
lili.children[3].addEventListener('mouseover',function(){
// 改变颜色
lili.children[3].style.backgroundColor = '#7d9b94';
lili.children[3].children[0].style.color = '#ffffff';
})
// 鼠标离开时
lili.children[3].addEventListener('mouseout',function(){
// 改变颜色
lili.children[3].style.backgroundColor = '#ffffff';
lili.children[3].children[0].style.color = '#b6c2d5';
})
// 鼠标点击时
var num3 = 0;
lili.children[3].addEventListener('click',function(){
// 定时窗口关闭和打开
if(num3 == 0){
lili.children[4].style.display = 'block';
num3 = 1;
}else if(num3 == 1){
lili.children[4].style.display = 'none';
num3 = 0;
}
})
// 设置定时事件
// 一分钟
lili.children[4].children[0].children[0].addEventListener('click',function(){
lili.children[4].style.display = 'none';
setTimeout(function(){
var linei = lili.children[1].value;
alert('注意时间到了 ' + linei);
},2000)
})
// 30分钟
lili.children[4].children[0].children[1].addEventListener('click',function(){
lili.children[4].style.display = 'none';
setTimeout(function(){
var linei = lili.children[1].value;
alert('注意时间到了 ' + linei);
},1800000)
})
// 1小时
lili.children[4].children[0].children[2].addEventListener('click',function(){
lili.children[4].style.display = 'none';
setTimeout(function(){
var linei = lili.children[1].value;
alert('注意时间到了 ' + linei);
},3600000)
})
// 5小时
lili.children[4].children[0].children[3].addEventListener('click',function(){
lili.children[4].style.display = 'none';
setTimeout(function(){
var linei = lili.children[1].value;
alert('注意时间到了 ' + linei);
},18000000)
})
// 24小时
lili.children[4].children[0].children[4].addEventListener('click',function(){
lili.children[4].style.display = 'none';
setTimeout(function(){
var linei = lili.children[1].value;
alert('注意时间到了 ' + linei);
},86400000)
})
}
})
})
原码分享(含图片等资源)
链接:JS代码
提取码:vfu1