todolist从无到有

刚开始，我看到这个todolist我都快懵了，这是什么，这是做什么的，对于刚接触js的来说，无异于是劝退，但再难也是人搞出来的，所以还是可以做的。

想要一个todolist，就要清楚你想要做成什么样的，增、删、改应该是todolist最基本的要求，下面我列了一些我的todolist里面有的一些功能：

1.实现重要任务的标记

2.显现定时提醒，与延时操作

3.实现任务的添加、及改变状态

4.实现新加任务的进场动画

5.背景图片的切换、及渐变效果

一、整体框架

在todolist中新建任务是最重要的，要如何新建呢？

首先我们要有一个模板，每一个新建的任务都是通过这个模板产生的，当然这个模板是不能被看到的，这个模板包含了每一个新建任务的所有内容。

模板建好后，我们就可以实现里面的细节，最难的我觉得应该是定时与延时的操作，要使用到下拉框，然而下拉框的值与其他的获取方式不太一样，这个问题困扰了我好久，最后还是去百度了，具体大家可以借鉴这篇文章：JS获取下拉列表选中项的值和文本_破光之流风的博客-CSDN博客https://blog.csdn.net/PKWind/article/details/12841655

下面附上完整的代码：

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/TODO.css"><link rel="stylesheet" href="../../考核/css/base.css">
</head><body><div id="bigBox"><button id="change">切换背景</button><div id="banner" class="banner"><ul id="list"><li>开心每一天</li><li id="exam">努力工作</li><li>离自己的目标又近了亿点点</li><li>开心每一天</li></ul></div><div id="xiahuaxian"></div><!-- 时间开始 --><div id="timer"><div id="this-date"></div></div><!-- 时间结束 --><!-- 新建任务开始 --><div class="new-task"><h2>新建任务</h2><input type="text" placeholder="准备做什么？"></div><!-- 新建任务结束 --><!-- 未做任务开始 --><button id="arrear">未完成</button><div class="useless"></div><div class="todo-list"></div><!-- 未做任务结束 --><!-- 已做任务开始 --><button id="haveDone">已完成</button><div class="useless1"></div><div class="done-list"></div><!-- 已做任务结束 --><!-- 模板开始 --><div class="todo-tamplate"><div class="todo-item"><div class="to do-item-icon"><img class="todo-icon" src="../image/icons/uncheck.png" alt=""></div><div class="todo-content"><div class="todo-text"></div></div><div class="nowdate"></div><div class="todo-star-icon"><img class="star-icon" src="../image/icons/star.png" alt=""></div><div class="tixing"><div id="timing">定时<select id="timing-sel"><option value="0" class="timing-opt">0</option><option value="1" class="timing-opt">0.25h</option><option value="2" class="timing-opt">0.5h</option><option value="3" class="timing-opt">1h</option><option value="4" class="timing-opt">2h</option><option value="5" class="timing-opt">3h</option></select></div><div id="delayed">延时<select id="delayed-sel"><option value="0" class="delayed-opt">0</option><option value="1" class="delayed-opt">0.25h</option><option value="2" class="delayed-opt">0.5h</option><option value="3" class="delayed-opt">1h</option><option value="4" class="delayed-opt">2h</option><option value="5" class="delayed-opt">3h</option></select></div></div></div></div></div><script src="../js/TODO.js"></script></body></html>

css部分

* {margin: 0;padding: 0;
}#bigBox {position: relative;width: 600px;border: 1px solid rgb(142, 140, 140);margin: 0 auto;overflow: hidden;/* text-align: center; */background-image: url("../image/bg1.jpg");border-radius: 10px;box-shadow: 1px 1px 1px 1px rgb(101, 205, 236)
}.banner {width: 600px;height: 30px;/* border: 1px solid red; */overflow: hidden;position: relative;left: 135px;
}#xiahuaxian {margin: 0 auto;height: 3px;width: 200px;border-radius: 1px;background-image: linear-gradient(#2de2ff, #8b67fb);
}.banner ul {list-style: none;height: 90px;position: absolute;top: 0px;
}.banner ul li {text-align: center;width: 300px;border-radius: 5px;/* background-color: rgb(21, 183, 212); */height: 30px;line-height: 30px;font-size: large;margin-left: 10px;/* 渐变色字体 */background-image: linear-gradient(#2de2ff, #8b67fb);background-clip: text;-webkit-background-clip: text;color: transparent;
}#exam {background-color: rgb(226, 11, 11);
}#timer {position: absolute;top: 10px;right: 10px;/* 渐变色字体 */background-image: linear-gradient(#2de2ff, #8b67fb);background-clip: text;-webkit-background-clip: text;color: transparent;
}.new-task h2 {font-weight: 300;color: black;margin-left: 43%;
}.new-task input {width: 150px;height: 20px;margin-top: 2px;background-image: url("../image/bg1.jpg");border-radius: 2px;border-bottom: 1px solid rgb(135, 133, 133);margin-left: 50px;
}.new-task img {margin-left: 30px;height: 20px;width: 20px;
}.todo-list {display: block;color: rgb(10, 10, 10);
}.done-list {display: block;color: rgb(10, 10, 10);
}.todo-item {display: flex;position: relative;left: 0px;margin-top: 20px;border-bottom: 1px dashed rgb(180, 177, 177);
}.todo-item-icon {display: flex;position: relative;align-items: baseline;width: 20px;height: 20px;overflow: hidden;
}.todo-star-icon {display: flex;position: absolute;left: 400px;align-items: baseline;width: 20px;height: 20px;overflow: hidden;
}.star-icon {width: 100%;height: 100%;
}.todo-tamplate {display: none;
}.todo-text {margin-left: 30px;font-size: 15px;
}#arrear {height: 20px;width: 70px;background-image: linear-gradient(to right, rgb(29, 201, 216), rgb(143, 228, 243));border-radius: 5px;margin: 10px 0;margin-left: 50px;color: rgb(10, 10, 10);
}.useless {margin: 0 auto;height: 1px;width: 500px;border-bottom: 1px solid rgb(110, 109, 109);
}.useless1 {margin: 0 auto;height: 1px;width: 500px;border-bottom: 1px solid rgb(110, 109, 109);
}#haveDone {display: inline;height: 20px;width: 70px;background-image: linear-gradient(to right, rgb(29, 201, 216), rgb(143, 228, 243));border-radius: 5px;margin: 10px 0;margin-left: 50px;color: rgb(10, 10, 10);
}.nowdate {position: absolute;right: 220px;font-weight: 100;align-items: baseline;margin-top: 4px;
}.tixing {display: flex;position: absolute;left: 429px;
}#yanshi {display: flex;margin-left: 5px;font-size: 5px;font-weight: 100;
}.tixing select {border: 0 none white;outline: none;background-image: linear-gradient(to right, rgb(29, 201, 216), rgb(143, 228, 243));font-size: 5px;font-weight: 100;
}#change {position: absolute;top: 10px;left: 0;background-image: url("../image/bg1.jpg");color: rgb(5, 85, 247);box-shadow: 1px 1px 1px 1px rgb(101, 205, 236)
}/* 点击展开 */@keyframes zhankai {0% {height: 0;}100% {}
}/* 项目动画 */@keyframes huaru {0% {left: -615px;}100% {left: 0;}
}/* 换图动画 */@keyframes huantudonghuaxiaoshi {100% {opacity: 0;}
}@keyframes huantudonghuaxianshi {0% {opacity: 0.5;}100% {opacity: 1;}
}.donghualei {animation-name: huantudonghuaxianshi;animation-duration: 2s;animation-iteration-count: 1;
}.donghualei1 {animation-name: huantudonghuaxianshi;animation-duration: 2s;animation-iteration-count: 1;
}

js部分

window.onload = function() {// 跑马灯开始var banner = document.querySelector("#banner");var list = document.querySelector("#list");var top1 = 0;var timer2 = null;startMove();function startMove() {clearInterval(timer2);timer2 = setInterval(function() {top1 -= 30;if (top1 <= -90) {top1 = 0;}list.style.top = top1 + "px";}, 2000);}function stopMove() {clearInterval(timer2);};banner.onmouseenter = function() {stopMove();};banner.onmouseleave = function() {startMove();};// 跑马灯结束let time = new Date();let year = time.getFullYear();let month = time.getMonth() + 1;let day = time.getDate();var weekday = new Array(7);weekday[0] = "周日";weekday[1] = "周一";weekday[2] = "周二";weekday[3] = "周三";weekday[4] = "周四";weekday[5] = "周五";weekday[6] = "周六";let weeks = time.getDay();let inputBox = document.querySelector('.new-task input');let date = document.getElementById('this-date');date.innerText = year + "年" + month + "月" + day + "日" + " " + weekday[weeks];// 判断输入框是否为空inputBox.onkeydown = function(event) {if (event.keyCode == 13) {let inputBoxvalue = inputBox.value;if (inputBoxvalue == '') { //换成正则alert("请重新输入");inputBoxvalue.remove(inputBoxvalue)}let tamplate = document.querySelector('.todo-tamplate');// 复制tamplate里面的所有节点，深拷贝let newtaskContainer = tamplate.cloneNode(true);let nowdate = document.getElementsByClassName('nowdate');// nowdate[0].innerHTML = month + 1 + "月" + day + "日";let newtaskNode = newtaskContainer.querySelector('.todo-item');newtaskNode.querySelector('.todo-text').innerText = inputBoxvalue;let firsttodo = document.querySelector('.todo-list .todo-item');document.querySelector('.todo-list').insertBefore(newtaskNode, firsttodo);// 完成后去除输入框内的文字inputBox.value = '';for (var i = 0; i < nowdate.length; i++) {nowdate[i].innerHTML = month + "月" + day + "日";}let icon = newtaskNode.querySelector('.todo-icon');var state = 1;icon.onclick = function(event) {// state == 1表示该任务处于未完成状态if (state == 1) {icon.setAttribute('src', '../image/icons/check_box.png');// 找到要加下划线的元素let todoText = icon.parentElement.parentElement.querySelector('.todo-text');// 给元素加下滑线todoText.style.textDecoration = 'line-through';// 将已完成的任务加到已完成中document.querySelector('.done-list').appendChild(icon.parentElement.parentElement);state = 2;} else if (state == 2) {state = 1;icon.setAttribute('src', '../image/icons/uncheck.png');// 找到要加下划线的元素let todoText = icon.parentElement.parentElement.querySelector('.todo-text');// 给元素加下滑线todoText.style.textDecoration = '';// 将已完成的任务加到已完成中document.querySelector('.todo-list').appendChild(icon.parentElement.parentElement);}}let starTarget = document.querySelector('.star-icon');let significance = 1;starTarget.onclick = function() {if (significance == 1) {significance = 2;starTarget.setAttribute('src', '../image/wujiaoxing2.png');} else if (significance == 2) {starTarget.setAttribute('src', '../image/icons/star.png');significance = 1;}}// ----------------------------------------------------// 定时操作var timingSelect = document.getElementById("timing-sel");var delayedSelect = document.getElementById("delayed-sel");var timeOne = 0;var popover = true;timingSelect.onchange = function() {timeOne = timingSelect.options[timingSelect.selectedIndex].value;let time = timeOne;if (state == 1) {var timer = setInterval(() => { //=>是一个箭头函数，Es6新特性time--;if (time == 0) {var popover1 = confirm('您时间已到,是否进行延时操作');popover = popover1;if (popover1 == false) {icon.setAttribute('src', '../image/icons/check_box.png');// 找到要加下划线的元素let todoText = icon.parentElement.parentElement.querySelector('.todo-text');// 给元素加下滑线todoText.style.textDecoration = 'line-through';// 将已完成的任务加到已完成中document.querySelector('.done-list').appendChild(icon.parentElement.parentElement);state = 2;}cearInterval(timer);state = 2;}console.log("我是定时" + timer);//clearInterval(定时器名称)清除定时器}, 1000); //每过一秒时间减一} else if (state == 2) {alert('你已经完成该任务，无法进行该操作');}}// 定时操作// -----------------------------------------------------// ======================================================// 延时操作开始if (popover) {var timeTwo = 0;delayedSelect.onchange = function() {timeTwo = delayedSelect.options[delayedSelect.selectedIndex].value;var yanshitime = setInterval(() => {timeTwo--;if (state == 2) {alert('你已经完成该任务，无法进行该操作');clearInterval(yanshitime);}if (timeTwo == 0) {alert('延长时间已到,任务已强制完成');clearInterval(yanshitime);icon.setAttribute('src', '../image/icons/check_box.png');// 找到要加下划线的元素let todoText = icon.parentElement.parentElement.querySelector('.todo-text');// 给元素加下滑线todoText.style.textDecoration = 'line-through';// 将已完成的任务加到已完成中document.querySelector('.done-list').appendChild(icon.parentElement.parentElement);state = 2;}}, 1000);}// 延时操作结束// ========================================================}};// ----------------------------------------------------// 按钮点击操作let arrearButton = document.getElementById('arrear');// let todoitem = document.getElementsByClassName('todo-item');let todolist = document.querySelector('.todo-list');// let todolisthight1 = todolist.offsetHeight;let reveal = 1; //表示盒子的显示状态arrearButton.onclick = function() {if (reveal == 1) {todolist.style.display = 'none'reveal = 2;} else if (reveal == 2) {todolist.style.display = 'block'reveal = 1;}}let reveal1 = 1;let haveDoneButton = document.getElementById('haveDone');// let doneitem = document.getElementsByClassName('todo-item');let donelist = document.querySelector('.done-list');haveDoneButton.onclick = function() {if (reveal1 == 1) {donelist.style.display = 'none'reveal1 = 2;} else if (reveal1 == 2) {donelist.style.display = 'block'reveal1 = 1;}}// ---------------------------------------------------------------document.getElementsByClassName('todo-item')[0].style.animation = "huaru 1.3s cubic-bezier(.45,.03,.2,.94) 1";}let bigBox = document.getElementById('bigBox');let change = document.getElementById('change');let inputs = document.querySelector('input');let subscript = 1;change.onclick = function() {if (subscript === 5) {subscript = 1;} else {subscript = subscript + 1;}bigBox.setAttribute('class', `donghualei1`);inputs.setAttribute('class', `donghualei1`);setTimeout('bigBox.classList.remove("donghualei1")', 1000);bigBox.style.backgroundImage = `url('../image/bg${subscript}.jpg')`inputs.style.backgroundImage = `url('../image/bg${subscript}.jpg')`bigBox.setAttribute('class', `donghualei`);inputs.setAttribute('class', `donghualei`);change.style.backgroundImage = `url('../image/bg${subscript}.jpg')`inputs.style.backgroundImage = `url('../image/bg${subscript}.jpg')`setTimeout('bigBox.classList.remove("donghualei")', 1000);}
}// = ==================================================================

使用到的css格式化代码

/* 清除默认样式 *//* 把我们所有标签的内外边距清零 */* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}/* em 和 i 斜体的文字不倾斜 */em,
i {font-style: normal
}/* 去掉li 的小圆点 */li {list-style: none
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框我们需要手动去掉 */border: 0;outline: none;
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

todolist从无到有相关推荐

Robotium todolist.test.elements
2019独角兽企业重金招聘Python工程师标准>>> ElementsEditToDoItemActivity package com.example.todolist.test. ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
vue写的简单版todolist
上一张丑图: 项目演示地址:http://47.75.195.199/todolist/ 源码地址:https://github.com/chunsenye/... <template>& ...
专访腾讯云沙开波：从无到有，打造全球领先调度系统
\\ "以前每个周末都去跑跑步.打打球,现在回家就是接接小孩,随着年龄的增长,很多爱好都丢了." \\\\ 沙开波--腾讯云计算产品总监,从一名基础架构组的程序员,到如今腾讯云计算 ...
Android程序ToDoList增加配置项页面
本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference).这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后 ...
从无到有＜前端异常监控系统＞落地
从无到有<前端异常监控系统>落地参考文章: (1)从无到有<前端异常监控系统>落地 (2)https://www.cnblogs.com/1wen/p/7942608.htm ...
python是一门什么课程-从无到有用Python创造一门属于自己的编程语言1
前言如果你会编译原理,对其中的词法分析算法,语法分析算法足够了解,那么用什么语言来做这样的一件事情都是可以的,之所以使用Python只是因为本人会的编程语言中, Python的使用时间最长,也最得心 ...
从无到有：微信后台系统的演进之路
从无到有 2011.1.21 微信正式发布.这一天距离微信项目启动日约为2个月.就在这2个月里,微信从无到有,大家可能会好奇这期间微信后台做的最重要的事情是什么? 我想应该是以下三件事: 1. 确定了 ...
初学微信小程序 TodoList
微信小程序的学习微信小程序的开始尝试 TodoList 微信开发者工具生成目录如下: . |-- app.js |-- app.json |-- app.wxss |-- pages | |-- ...

todolist从无到有

一、整体框架

todolist从无到有相关推荐

最新文章

热门文章