技术栈
HTML,CSS,JS,jQuery,bootstrap
实现思路
基于jQuery这个强大的JS框架,可以更简单地写出更优美的,有简单动画效果的todolist。
bootstrap使页面布局更容易
作品展示
开发环境准备
下载jQuery
下载地址
第一和是生产环节的,第二个是开发环节的,两个都可以用,点进去复制里面的代码,在js文件夹中创建一个文件,并粘贴就行了
引入jQuery
在html文件中引入刚刚下载的文件
代码
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="./css/base.css">
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./jq_font/iconfont.css">
<script src="./js/index.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<!-- 使用栅格化使得todolist占4份 -->
<div class="col-md-4 col-md-offset-4 todolist_wrapper">
<div class="search">
<input type="text">
<a href="javaScript:;">
<i class="iconfont"></i>
</a>
</div>
<div class="row">
<!-- todolist里面的内容占两份 -->
<div class="todolist col-md-10 col-md-offset-1">
<h3>每日待办列表</h3>
<div class="input_box">
<!-- 设置输入框 -->
<div class="input_box_1">
<!-- 设置没打开时的输入框 -->
<a href="javaScript:;" class="input_box_1_dian">
<i class="iconfont"></i>
</a>
<!-- 设置打开后的输入框 -->
<div class="input_box_2 row">
<!-- 设置输入文本框 -->
<div class="shuru col-md-10 col-md-offset-1">
<input type="text">
<div class="shuru_new">
<div class="shuru_new1">
<i class="iconfont"></i>
<input type="text" value="[8:00 ~ 10:00]">
</div>
</div>
</div>
<!-- 设置输入框底部 -->
<div class="input_box_2_foot col-md-10 col-md-offset-1">
<div class="box_2_label">
<a href="javaScript:;">
<i class="iconfont"></i>
<p>完成时段</p>
</a>
<!-- <a href="javaScript:;">
<i class="iconfont"></i>
<p>定义标签</p>
</a> -->
</div>
<!-- 设置底部两个按钮 -->
<div class="box_2_button">
<a href="javaScript:;" class="box_2_add">
<i class="iconfont"></i>
</a>
<a href="javaScript:;" class="box_2_back">
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 设置主要内容框 -->
<div class="main_wrapper">
<div class="nomore">
<p>没有更多任务了</p>
</div>
<div class="main main_ex">
<div class="main_head">
<input type="text" value="测试" onfocus=this.blur()>
<a href="javaScript:;" class="main_head_right">
<i class="iconfont"></i>
</a>
<a href="javaScript:;" class="main_head_gai">
<i class="iconfont"></i>
</a>
<a href="javaScript:;" class="main_head_la">
<i class="iconfont"></i>
</a>
</div>
<div class="main_body main_body_ex">
<i class="iconfont"></i>
<!-- <input type="text" value="[8:00 ~ 10:00]"> -->
<p>8:00 ~ 10:00</p>
</div>
</div>
<!-- // 获取数据
var data = getDate()
// 修改数据
data[$(".check_new").parent().index() - 2].title = main_text
data[$(".check_new").parent().index() - 2].time = main_time
// 保存数据
saveDate(data) -->
<!-- 设置更改框 -->
<div class="main_check_wrapper">
<div class="main_check">
<div class="main_check_head">
<span>任务:</span>
<input type="text" placeholder="请输入你要修改的内容">
<span>日期:</span>
<input type="text" placeholder="请输入你要修改的时间">
</div>
<div class="check_button">
<a href="javaScript:;" class="check_add">
<i class="iconfont"></i>
</a>
<div class="check_img">
<img src="./imgs/QQ图片20220615150455.gif" alt="">
</div>
<a href="javaScript:;" class="check_back">
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码
.wrapper{
background-color: #323232;
width: 100%;
height: 100%;
}
input{
border: none;
outline: none;
}
/* 设置背景颜色 */
.container-fluid{
background-color: #323232;
/* height: 100%; */
width: 1519px;
}
.container-fluid > .row{
width: 1519px;
/* height: 713px; */
}
/* 设置todolist的外边框 */
.todolist_wrapper{
/* height: 603px; */
min-height: 603px;
background-color: #fcdac2;
border-radius: 3%;
margin-top: 55px;
margin-bottom: 55px;
position: relative;
z-index: 100;
}
/* 设置todolist的内容部分 */
.todolist{
/* background-color: red; */
/* height: 510px; */
margin-top: 35px;
margin-bottom: 35px;
/* overflow-y: scroll; */
}
/* 设置输入框1 */
.input_box{
width: 100%;
/* height: 40px; */
/* background-color: rebeccapurple; */
border-radius: 30px;
border: 1px dashed #4c3e33;
margin-top: 30px;
position: relative;
}
.input_box_1{
text-align: center;
transition: height 0.5s;
height: 39px;
overflow: hidden;
}
.input_box_1 a{
display: block;
line-height: 38px;
text-decoration: none;
/* color: #333; */
}
.input_box_1 a i{
color: #43443d;
}
/* 设置输入框2 */
.input_box_2{
display: block;
position: relative;
height: 200px;
}
.input_box_2 .shuru{
/* display: none; */
/* background-color: rebeccapurple; */
margin-top: 15px;
}
.input_box_2 .shuru input{
width: 100%;
background-color: #fcdac2;
border: none;
outline: none;
font-size: 20px;
font-weight: bolder;
}
/* 设置新输入框 */
.input_box_2 .shuru_new{
position: relative;
}
.input_box_2 .shuru_new i{
font-size: 20px;
float: left;
}
.input_box_2 .shuru_new input{
position: relative;
top: -30px;
left: 30px;
}
.shuru_new1{
display: none;
height: 28px;
margin-top: 20px;
}
.shuru_new2{
display: none;
height: 28px;
margin-top: 20px;
}
/* 设置输入框2的底部部分 */
.input_box_2_foot{
position: absolute;
/* background-color: red; */
/* height: 40px; */
/* width: 20px; */
bottom: 15px;
}
/* 设置输入框2的底部标签部分 */
.box_2_label a{
display: block;
float: left;
width: 90px;
height: 30px;
background-color:#f6cab5;
border-radius: 15px;
text-align: center;
position: relative;
text-decoration: none;
color: #333;
transition: color 0.5s;
}
.box_2_label a:hover i{
color: #fcdac2;
}
.box_2_label a:hover{
color: #fcdac2;
background-color: #323232;
}
.box_2_label a:nth-child(2){
position: absolute;
top: 35px;
left: -90px;
}
.box_2_label a i{
font-size: 20px;
position: absolute;
left: 5px;
top: -4px;
transition: color 0.5s;
}
.box_2_label a p{
position: absolute;
left: 27px;
top: -4px;
}
/* 设置底部两个按钮 */
.box_2_button a{
display: block;
float: right;
background-color: #fcf4d6;
width: 80px;
height: 30px;
border-radius: 15px;
position: relative;
box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}
.box_2_button a:nth-child(1){
margin-left: 15px;
}
.box_2_button a i{
font-size: 15px;
position: absolute;
left: 31px;
top: -4px;
}
/* 设置主要内容框 */
.nomore{
width: 390px;
height: 30px;
background-color: #fef7db;
text-align: center;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.nomore p{
line-height: 30px;
}
/* 设置事情框 */
.main{
display: none;
width: 390px;
height: 70px;
background-color: #fee7ce;
border-radius: 10px;
margin-top: 10px;
position: relative;
overflow:hidden ;
transition: height 0.5s;
}
/* 设置事情框头部 */
.main_head{
width: 390px;
height: 35px;
border-radius: 5px;
background-color: #ecbdac;
text-align: center;
}
.main_head input{
display: inline;
height: 33px;
background-color: #ecbdac;
line-height: 33px;
/* margin-left: 15px; */
font-size: 20px;
font-weight: bolder;
}
/* 设置点击完成 */
.main_head .main_head_right{
display: block;
width: 60px;
height: 30px;
background-color: #fcf4d6;
text-decoration: none;
float: right;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
line-height: 35px;
margin-top: 2px;
margin-right: 5px;
text-align: center;
transition: all 0.5s;
}
.main_head .main_head_right > i{
font-size: 25px;
color: #d09980;
line-height: 30px;
}
.red{
background-color: red;
}
.main_head .main_head_gai > i{
position: absolute;
right: 38px;
top: 36px;
color: #dbb099;
font-size: 25px;
z-index: 100;
}
.main_head .main_head_la > i{
position: absolute;
right: 8px;
top: 36px;
color: #dbb099;
font-size: 25px;
z-index: 100;
}
.main_head .main_head_la > i:hover{
color: #323232;
}
.main_head .main_head_gai > i:hover{
color: #323232;
}
/* 设置事情框身体部 */
.main_body{
height: 35px;
width: 390px;
position: relative;
line-height: 35px;
}
.main_body i{
margin-left: 15px;
font-size: 25px;
}
.main_body input{
position: absolute;
background-color: #fee7ce;
top:5px;
margin-left: 10px;
}
.main_body p{
height: 30px;
position: absolute;
background-color: #fee7ce;
top:1px;
left: 46px;
margin-left: 10px;
}
/* 设置查询和搜索框 */
.search{
position: absolute;
top: 30px;
left: 328px;
transition: all 0.5s;
z-index: -1;
}
.search input{
background-color: #fcdac2;
border: none;
outline: none;
/* border-top-right-radius: 15px;
border-bottom-right-radius: 15px; */
margin-left: 8px;
}
.search i{
text-decoration: none;
/* color: #333; */
/* line-height: 20px; */
}
.search a{
text-decoration: none;
/* color: #323232; */
position: absolute;
top: 0px;
left: 179px;
background-color: #fcdac2;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
width: 30px;
text-align: center;
border-left: 1px solid #ae9485;
height: 22px;
color: #333;
}
/* 设置更改框 */
.main_check_wrapper{
display: none;
position: absolute;
width: 400px;
height: 150px;
top: 100px;
left: 521px;
background-color: #fdea8f;
border-radius: 15px;
}
.main_check{
width: 350px;
border-radius: 30px;
border: 1px dashed #4c3e33;
margin: 0 auto;
margin-top: 10px;
/* text-align: center; */
height: 130px;
}
/* .main_check span:nth-child(3){
margin-left: 0;
} */
.main_check_head{
width: 300px;
margin: 10px auto;
}
.main_check input{
margin-top: 10px;
width: 247px;
background-color: #fdea8f;
}
/* 设置更改框两个按钮 */
.check_button a{
display: block;
/* float: right; */
background-color: #fcf4d6;
width: 60px;
height: 25px;
border-radius: 15px;
position: absolute;
box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
text-align: center;
}
.check_button .check_add{
top: 104px;
left: 288px;
}
.check_button .check_back{
top: 104px;
left: 52px;
}
/* .check_button a:nth-child(1){
margin-left: 15px;
} */
.check_button a i{
font-size: 15px;
position: absolute;
color: #333;
left: 22px;
top: 2px;
}
/* 设置图片 */
/* .check_img{
margin-left: 10px;
} */
.check_img img{
width: 17%;
height: 17%;
margin-left: 140px;
margin-top: -20px;
transition: all 0.5s;
}
JS部分代码
$(function(){
load()
// 读取本地存储的数据
function getDate(){
var data = localStorage.getItem("todolist")
if(data !== null){
// 本地存储里面的数据是字符串格式的,但是我们需要的是对象格式的
return JSON.parse(data);
}else{
return[];
}
}
// 保存本地存储数据
function saveDate(data){
localStorage.setItem("todolist", JSON.stringify(data))
}
// 添加函数
function add_main(){
// 对内容进行操作
var input_val = $(".shuru > input").val()
$(".main_ex input").val(input_val);
// 对时间进行操作
var input_time = $(".shuru_new1 > input").val()
$(".main_ex p").text(input_time);
// 添加操作
var main = $(".main_ex").clone(true);
// main.css("display", "block")
main.removeClass("main_ex")
$(".main_wrapper").before(main);
main.fadeIn("normal")
// 输入框重置
$(".shuru > input").val("")
// 标签重置
$(".shuru_new1").css("display", "none")
$(".box_2_label").children("a").eq(0).css("display", "block")
}
// 遍历数据
function load(){
// 读取本地存储的数据
var data = getDate()
// 遍历这个数据
$.each(data, function(i,n){
// 对内容进行操作
$(".main_ex input").val(n.title);
// 对时间进行操作
$(".main_ex p").text(n.time);
// 添加操作
var main = $(".main_ex").clone(true);
main.removeClass("main_ex")
$(".main_wrapper").before(main);
main.fadeIn("normal")
if(n.done == "true"){
$(".todolist").find(".main").eq(i).find(".main_head").find(".main_head_right").siblings("input").css("display", "none")
$(".todolist").find(".main").eq(i).find(".main_head").find(".main_head_right").css("width", "380")
$(".todolist").find(".main").eq(i).find(".main_head").find(".main_head_right").children("i").css("color", "#86ce40")
}
})
}
// 点击box_1的操作
$(".input_box_1_dian").click(function(){
// 隐藏box_1操作
$(this).css("display", "none");
// 改变box高度
$(".input_box_1").css("height", "200")
// 文本框获得焦点
$(".shuru > input").focus()
})
// 点击返回键操作
$(".box_2_back").click(function(){
// 显示box_1
$(".input_box_1_dian").css("display", "block");
// 改变box高度
$(".input_box_1").css("height", "39")
// 标签重置
$(".shuru_new1").css("display", "none")
$(".shuru_new2").css("display", "none")
$(".box_2_label").children("a").eq(0).css("display", "block")
$(".box_2_label").children("a").eq(1).css("display", "block")
// 输入框重置
$(".shuru > input").val("")
})
var index1 = 1;
// 对输入框标签进行操作
$(".box_2_label").children("a").eq(0).click(function(){
var label_time = $(this).val
$(this).css("display", "none")
$(".shuru_new1").css("display", "block")
index1 = 0;
// console.log(index1)
})
// 对点击添加进行操作
$(".box_2_add").click(function(){
if($(".shuru > input").val()==""){
alert("您没有输入内容")
}else if(index1 == 1){
// 对内容进行操作
var input_val = $(".shuru > input").val()
$(".main_ex input").val(input_val);
// 对时间进行操作
var input_time = $(".shuru_new1 > input").val()
$(".main_ex p").text("");
// 添加操作
var main = $(".main_ex").clone(true);
// main.css("display", "block")
main.removeClass("main_ex")
$(".main_wrapper").before(main);
main.fadeIn("normal")
// 输入框重置
$(".shuru > input").val("")
// 标签重置
$(".shuru_new1").css("display", "none")
$(".box_2_label").children("a").eq(0).css("display", "block")
// 文本框获得焦点
$(".shuru > input").focus()
}else{
add_main()
index1 = 1;
// 文本框获得焦点
$(".shuru > input").focus()
}
})
// 设置点击完成操作
$(".main_head_right").click(function(){
var timer1 = $(this).siblings("input")
if($(this).width() < 300 && $(this).siblings("input").css("display") == "inline-block"){
$(this).siblings("input").css("display", "none")
$(this).css("width", "380")
$(this).children("i").css("color", "#86ce40")
// 获取数据
var data = getDate()
// 修改数据
data[$(this).parent().parent().index() - 2].done = "true"
console.log($(this).parent().parent().index());
// 保存数据
saveDate(data)
}else{
$(this).css("width", "60",function(){
})
setTimeout(function(){
timer1[0].style.display = "inline"
}, 500)
$(this).children("i").css("color", "#d09980")
// 获取数据
var data = getDate()
// 修改数据
data[$(this).parent().parent().index() - 2].done = "false"
console.log($(this).parent().parent().index());
// 保存数据
saveDate(data)
}
})
var arr1 = new Array();
// 设置删除操作
$(".main_head_la").click(function(){
var timer2 = $(this).parent("div").parent("div")
$(this).parent("div").parent("div").css("height", "0")
setTimeout(function(){
// console.log(123)
timer2[0].style.display = "none"
}, 500)
// 获取数据
var data = getDate()
// 修改数据
// console.log($(this).parent
GH().parent().index();
data.splice($(this).parent().parent().index() - 2,1);
// 保存数据
saveDate(data)
// console.log(getDate());
})
// 设置查操作
// 查找框打开关闭
var index2 = 1;
$(".search > a").click(function(){
if(index2 == 0){
$(".search").css("left", "328px")
$(".search > input").val("")
index2 = 1
}else{
$(".search").css("left", "498px")
index2 = 0
}
// console.log($(".search").offset())
})
// 查找框功能
document.addEventListener("keyup",function(e){
if(e.key == "Enter" && $(".search > input").val() != ""){
var check_num = $(".search > input").val()
var list_num = $(".main_head")
// console.log(list_num.find("input"));
var list_arr = list_num.find("input")
// console.log(list_arr);
for(var i = 0; i<list_arr.length - 1; i++){
if(list_arr[i].value.includes(check_num)){
$(list_arr[i]).parent(".main_head").parent(".main").fadeOut("normal",function(){
$(".input_box").after($(this))
$(this).fadeIn("normal")
// console.log($(this));
})
console.log(i);
}
}
// if(list_num.find("input").val().includes(check_num)){
// console.log(0)
// }
}
})
// 设置改操作
$(".main_head_gai").click(function(){
// 获取本来文本框的值
var main_text = $(this).siblings("input").val()
var main_time = $(this).parent().siblings(".main_body").find("p").html()
$(".main_check_wrapper").stop().fadeIn("normal")
// 把值赋给更改框
$(".main_check_head").find("input").eq(0).val(main_text)
if(main_time == ""){
$(".main_check_head").find("input").eq(1).val("[8:00 ~ 10:00]")
}else{
$(".main_check_head").find("input").eq(1).val(main_time)
}
// 给点击改操作的文本框添加一个类名
$(this).parent().addClass("check_new")
})
// 点击更概况的添加按钮
$(".check_add").click(function(){
var main_text = $(".main_check_head").find("input").eq(0).val()
var main_time = $(".main_check_head").find("input").eq(1).val()
$(".main_check_wrapper").stop().fadeOut("normal")
$(".check_new > input").val(main_text)
$(".check_new").siblings(".main_body").find("p").text(main_time)
$(".main_head").removeClass("check_new")
})
$(".check_back").click(function(){
$(".main_check_wrapper").stop().fadeOut("normal")
$(".main_head").removeClass("check_new")
})
// 有趣的东西
var index3 = 1
$(".check_img > img").click(function(){
if(index3 == 1){
$(this).css("width","50%")
$(this).css("height","50%")
$(this).css("margin-left","90px")
$(this).css("margin-top","55px")
index3 = 0
}else{
$(this).css("width","17%")
$(this).css("height","17%")
$(this).css("margin-left","140px")
$(this).css("margin-top","-20px")
index3 = 1
}
})
})
源码分享(含图片,文件等资源)
链接:源码
提取码:hzor