效果图如下：
此 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>TODOLIST</title>
<link rel="stylesheet"
href="https://at.alicdn.com/t/font_3367451_ccpjp65hhf9.css?spm=a313x.7781069.1998910419.51&file=font_3367451_ccpjp65hhf9.css" />
<link rel="stylesheet" href="todo.css" />
<script src="todo.js"></script>
</head>
<body>
<div class="container">
<!-- header -->
<div class="header">
<div class="header-left">
<h1>我的一天</h1>
<div class="myday">五月 17日星期日</div>
</div>
<div class="header-right">奥利给~！</div>
</div>
<!-- 添加任务 -->
<div class="new-task">
<span class="iconfont icon-plus"></span>
<input type="text" placeholder="添加任务" />
</div>
<!-- todo-list -->
<div class="todo-list"></div>
<!-- done-list -->
<div class="done-list"></div>
<!-- todo-list模板 -->
<div class="template">
<div class="todo-item">
<span class="iconfont icon-circle"></span>
<div class="todo-content">
<div class="todo-text">下班取快递</div>
<div class="todo-type">任务</div>
</div>
<span class="iconfont icon-xingxing1"></span>
</div>
</div>
</div>
</body>
</html>以下是CSS代码：
* {
margin: 0;
padding: 0;
}
/* 定义滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*定义滚动条轨道 内阴影+圆角*/
/* ::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
border-radius: 10px;
background-color: #272d44;
} */
/*定义滑块 内阴影+圆角*/
/* ::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
background-color: rgba(240, 240, 240, 0.5);
} */
.container {
width: 800px;
height: 700px;
margin: 100px auto;
/* background-color: pink; */
overflow: auto;
border: 1px solid rgb(223, 223, 22);
border-radius: 5%;
overflow-y: scroll;
}
/* header */
.header {
/* width: auto; */
height: 100px;
margin: 10px 15px;
/* background-color: skyblue; */
}
/* header-left */
.header .header-left {
float: left;
}
.myday {
margin-top: 5px;
}
/* header-right */
.header .header-right {
margin-top: 20px;
float: right;
}
/* 模板 */
.template {
display: none;
}
/* new-task */
.new-task {
margin: 0 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.new-task .icon-plus {
font-size: 30px;
color: #a5a5a5;
vertical-align: middle;
}
/* input */
.new-task input {
width: 670px;
height: 30px;
color: #a5a5a5;
outline: none;
border: 0;
padding-left: 11px;
}
input:placeholder-shown {
font-size: 1em;
}
/* 代办 and 已做 todo-item*/
.todo-list .todo-item,
.done-list .todo-item {
margin: 0 15px;
padding: 10px 0;
height: 40px;
border-bottom: 1px solid #f7f7f7;
z-index: 2;
}
/* 小圆圈 和 星号 */
.todo-list .todo-item span:first-child,
.todo-list .todo-item span:last-child,
.done-list .todo-item span:first-child,
.done-list .todo-item span:last-child {
display: block;
font-size: 20px;
}
/* todo-list 小圆圈 */
.todo-list .todo-item span:first-child {
float: left;
color: rgb(212, 55, 55);
}
/* todo-list 星号 */
.todo-list .todo-item span:last-child {
float: right;
color: rgb(212, 55, 55);
}
/* todo-content */
.todo-list .todo-item .todo-content,
.done-list .todo-item .todo-content {
display: inline-block;
margin-left: 25px;
}
/* 定时器 */
/* 定时模块 */
.todo-list .todo-item span:nth-of-type(2) {
/* position: relative; */
float: right;
display: block;
text-align: center;
width: 60px;
height: 39px;
line-height: 39px;
margin-left: 10px;
border: 2px solid palegoldenrod;
border-radius: 15%;
/* color: rgb(212, 57, 57); */
}
/* 定时选区 */
.todo-list .todo-item span:nth-of-type(2) .timing-type {
position: relative;
left: -8px;
top: 2px;
width: 77px;
background-color: lemonchiffon;
border-radius: 5%;
z-index: 2;
display: none;
overflow: hidden;
}
/* 定时选项 */
.todo-list .todo-item span:nth-of-type(2) .timing-type div {
font-size: 13px;
height: 15px;
line-height: 15px;
padding: 5px 0;
}
/* .todo-list and .done-list */
/* todo-content > todo-text and todo-type */
/* todo-text */
.todo-list .todo-content .todo-text,
.done-list .todo-content .todo-text {
height: 22.4px;
font-size: 17px;
color: #696969;
}
/* todo-type */
.todo-list .todo-content .todo-type,
.done-list .todo-content .todo-type {
font-size: 12px;
color: #696b71;
/* transform-origin: 0 0; */
/* transform: scale(0.8); */
}
/* done-list */
/* done-list 圆圈 */
.done-list .todo-item span:first-child {
float: left;
color: rgb(49, 151, 191);
}
/* done-list 星号 */
.done-list .todo-item span:last-child {
float: right;
color: rgb(49, 151, 191);
}
/* .todo-text 加删除线 */
.done-list .todo-content .todo-text {
text-decoration: line-through double #333;
}没能实现刷新页面后item在页面重现
以下是JavaScript代码：
window.addEventListener('load', function () {
var newTaskInput = this.document.querySelector('.new-task input');
var todoList = this.document.querySelector('.todo-list');
var doneList = this.document.querySelector('.done-list');
// 获取模板
var todoItem = this.document.querySelector('.todo-item');
var date = null;
// type
var type;
//计时器(记录秒数)
var s = 0;
// var valueText;
// 如果 localStorage 中存有键值对，则遍历键值对
// if (this.localStorage) {
// // 遍历键值对
// for (var i = 0; i < this.localStorage.length; i++) {
// if (this.localStorage.getItem(this.localStorage.key(i)).parentNode == todoList) {
// // todoList.appendChild(this.localStorage.getItem(this.localStorage.key(i)), todoList.children[0]);
// valueText = this.localStorage.getItem(this.localStorage.key(i)).children[1].children[0].innerHTML;
// this.document.write("<div class=" + 'todo-item' + "><span class=" + 'iconfont icon-circle' + "></span><div class=" + 'todo-content' + "><div class=" + 'todo-text' + ">+'valueText'+</div><div class=" + 'todo-type' + ">任务</div></div><span class=" + 'iconfont icon-xingxing1' + "></span></div>");
// console.log('加入todolist');
// } else {
// // doneList.appendChild(this.localStorage.getItem(this.localStorage.key(i)), doneList.children[0]);
// console.log('加入donelist');
// }
// }
// }
// 日期显示
var timesTamp = new Date();
var year = timesTamp.getFullYear(); // 年
var month = timesTamp.getMonth() + 1; // 月
var dates = timesTamp.getDate(); // 日
var day = timesTamp.getDay(); // 周几
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var myDay = this.document.querySelector('.myday');
myDay.innerHTML = year + '年' + month + '月' + dates + '日 ' + arr[day];
// 添加任务
newTaskInput.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
if (newTaskInput.value != '') {
// 克隆任务条款
var todo_item = todoItem.cloneNode(true);
// 更改任务条款里的文本
todo_item.children[1].children[0].innerHTML = newTaskInput.value;
// // 实现 刷新页面后不会消失
// // 获取 时间戳
// date = Date.now();
// // 存储数据 (存储任务条款)
// localStorage.setItem(date, todo_item);
// 把更改 value 后的 新 任务条款添加至最前面(第一个前面)
todoList.insertBefore(todo_item, todoList.children[0]);
// 定时功能
// 创建 定时模块 timing
var timing = document.createElement('span');
// 给 timing 内容
timing.innerHTML = '定时';
// 添加 定时模块
todo_item.insertBefore(timing, todo_item.children[2]);
// 给 timing 创建选项区 timingType，子节点
var timingType = document.createElement('div');
// 给 timing 添加选项区
timing.appendChild(timingType, timing.children[0]);
// 给 timingType 设置style
timingType.className = 'timing-type';
// 给 timingType 创建定时
var typeTimer = null;
// 给 timingType 创建 6个选项
var type1 = document.createElement('div');
type1.innerHTML = '5分钟后';
type1.setAttribute('times', 300);
var type2 = document.createElement('div');
type2.innerHTML = '15分钟后';
type2.setAttribute('times', 900);
var type3 = document.createElement('div');
type3.innerHTML = '30分钟后';
type3.setAttribute('times', 1800);
var type4 = document.createElement('div');
type4.innerHTML = '1小时后';
type4.setAttribute('times', 3600);
var type5 = document.createElement('div');
type5.innerHTML = '3小时后';
type5.setAttribute('times', 10800);
var type6 = document.createElement('div');
type6.innerHTML = '明天';
type6.setAttribute('times', 86400);
// 给 timingType 添加 6个选项
timingType.appendChild(type1);
timingType.appendChild(type2);
timingType.appendChild(type3);
timingType.appendChild(type4);
timingType.appendChild(type5);
timingType.appendChild(type6);
// 给 timingType 注册 鼠标 移入 移出 事件
timing.addEventListener('mouseenter', function () {
timingType.style.display = 'block';
})
timing.addEventListener('mouseleave', function () {
timingType.style.display = 'none';
})
// 给 type1~6 注册鼠标 经过离开 事件 排他 and 点击事件 (实现定时提醒)
for (var i = 0; i < timingType.children.length; i++) {
// 排他
timingType.children[i].addEventListener('mouseenter', function () {
for (var i = 0; i < timingType.children.length; i++) {
timingType.children[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'rgb(218, 207, 97)';
})
// 给 每一个 type 注册点击事件
timingType.children[i].addEventListener('click', function () {
// 如果 点击相同的 则取消定时
if (this == type) {
timingType.parentNode.style.backgroundColor = '';
clearInterval(typeTimer);
// timing.innerHTML = '定时'+write(timingType)+'';
alert('已取消定时');
return;
}
// 已定时 给 当前定时模块换个背景色
timingType.parentNode.style.backgroundColor = 'rgb(212, 57, 57)';
// type 是当前 点击的选项
type = this;
// 如果 没有定时，定时器为null，则开启定时，否则更改定时
if (typeTimer == null) {
// 修改 timing 内容
// timing.innerHTML = '已定时'+write(timingType)+'';
alert('已定时');
typeTimer = setInterval(function () {
s++;
if (s == type.getAttribute('times')) {
// 清零
s = 0;
timingType.parentNode.style.backgroundColor = '';
alert('时间到');
// timing.innerHTML = '定时'+write(timingType)+'';
clearInterval(typeTimer);
}
}, 1000)
} else {
s = 0;
alert('已更改定时');
typeTimer = setInterval(function () {
s++;
if (s == type.getAttribute('times')) {
s = 0;
timingType.parentNode.style.backgroundColor = '';
alert('时间到');
// timing.innerHTML = '定时'+write(timingType)+'';
clearInterval(typeTimer);
}
}, 1000)
}
})
}
// 获取circle圆圈
var circle = todoList.children[0].querySelector('.icon-circle');
// 获取 小星星
var star = todoList.children[0].querySelector('.icon-xingxing1');
// circle圆圈 和 小星星 设置 行高和高 为父元素的高 (padding+content) 最后需要减去 padding
circle.style.lineHeight = circle.parentNode.clientHeight - 20 + 'px';
circle.style.height = circle.parentNode.clientHeight - 20 + 'px';
star.style.lineHeight = star.parentNode.clientHeight - 20 + 'px';
star.style.height = star.parentNode.clientHeight - 20 + 'px';
// 为circle注册点击事件 删除所在item
circle.addEventListener('click', function () {
if (circle.className == 'iconfont icon-circle') {
// 如果在 todo-list 则加入 done-list
// 更改circle字体图标
circle.className = 'iconfont icon-check-circle';
// 把更改后的 item 添加至 done-list 从 todo-list 中移除
doneList.insertBefore(this.parentNode, doneList.children[0]);
// 隐藏 timing 定时模块
timing.style.display = 'none';
} else {
// 如果在 done-list 则加入 todo-list
// 更改circle字体图标
circle.className = 'iconfont icon-circle';
// 把更改后的 item 添加至 todo-list 从 done-lsit 中移除
todoList.insertBefore(this.parentNode, todoList.children[0]);
// 显示 timing 定时模块
timing.style.display = 'block';
}
})
// 为 star 绑定点击事件 标为重要 或 不重要
star.addEventListener('click', function () {
if (star.className == 'iconfont icon-xingxing1') {
// 如果是 空心 则改为实心
star.className = 'iconfont icon-xingxing';
} else {
// 如果是 实心 则改为空心
star.className = 'iconfont icon-xingxing1';
}
})
// 表单 value 置空
newTaskInput.value = '';
}
}
})
})
// window.addEventListener('load',function() {
// var newTaskInput = this.document.querySelector('.new-task input');
// var todoList = this.document.querySelector('.todo-list');
// var doneList = this.document.querySelector('.done-list');
// // 获取模板
// var todoItem = this.document.querySelector('.todo-item');
// for(var i=0;i<this.localStorage.length;i++) {
// if(this.localStorage.getItem(this.localStorage.key(i)).parentNode == todoList) {
// todoList.appendChild(this.localStorage.getItem(this.localStorage.key(i)),todoList.children[0]);
// } else {
// // doneList.appendChild(this.localStorage.getItem(this.localStorage.key(i)),doneList.children[0]);
// }
// }
// })
2360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
