涉及到的知识点：
1、合理运用番茄钟，支持定时提醒
2、需要使用localstorage进行数据管理
3、实现四象限的展示
4、需要应用JS实现多种动漫效果
先展示我的主页面：
我的页面，主要分为3部分，先展示页面效果，具体代码后面我将会一一讲解：
清单页面
四象限页面：
番茄钟页面：
为了方便理解，我紧着重点讲解
0、页面如何切换
这个是非重点，因为相信大家都懂，但我在强调一下。
html框架
<!-- 主体 -->
<div class="main">
<!-- 清单页面 -->
<!-- 仅对第一个页面设为mian-display,看完css后，就明白了 -->
<div class="m-list main-display">
</div>
<!-- 四象限、整体页面 -->
<div class="m-quadrant">
</div>
<!-- 简单的番茄中页面 -->
<div class="m-tomato">
</div>
</div>
css框架
<!-- 起初，将3个界面，都设为display:none -->
<!-- 在设一个类 -->
.main-display {
display: flex;
}
Js框架
/*
获取3个主界面
*/
const list = document.querySelector('.list');
const tomato = document.querySelector('.tomato');
const quadrant = document.querySelector('.four-quadrant');
//绑定监听
list.addEventListener('click', function () {
// 先获得，.main-display类对应的标签
let mDisplay = document.querySelector('.main-display');
// 删除那个标签中.main-display类
mDisplay.classList.remove('main-display');
// 将该标签，添加到本标签中，从而实现display从none->flex
mList.classList.add('main-display');
});
tomato.addEventListener('click', function () {
// 先获得，.main-display类对应的标签
let mDisplay = document.querySelector('.main-display');
// 删除那个标签中.main-display类
mDisplay.classList.remove('main-display');
// 将该标签，添加到本标签中，从而实现display从none->flex
mtomato.classList.add('main-display');
});
quadrant.addEventListener('click', function () {
// 先获得，.main-display类对应的标签
let mDisplay = document.querySelector('.main-display');
// 删除那个标签中.main-display类
mDisplay.classList.remove('main-display');
// 将该标签，添加到本标签中，从而实现display从none->flex
mquadrant.classList.add('main-display');
})
1、清单页面
输入框-展示
输入框-代码
html代码
<div class="main-add-task">
// 先建立form，用于提取信息
<form class="main-info-task" autocomplete="off">
<div class="form1 add-pending-task-module">
//input输入框
<div>
<input type="text" class="add-pending-task" placeholder=" 请添加新的待办任务">
<button class="submit-pending-task"><span class="iconfont icon-xiaofeiji"></span></button>
</div>
<div class="function-task">
</div>
// select下拉框
// 代办清单下拉框
<select name="selection-list" class="selection-list">
</select>
// 四象限下拉框
<select name="quadrant-list" class="quadrant-list">
<option value="1">重要 / 紧急</option>
<option value="2">重要 /不紧急</option>
<option value="3">不重要/ 紧急</option>
<option value="4">不重要/不紧急</option>
</select>
// 选择时间下拉框
<select name="countdown" class="countdown">
<option value="5"> 5min</option>
<option value="10"> 10min</option>
<option value="20"> 20min</option>
<option value="30"> 30min</option>
<option value="60"> 60min</option>
</select>
// 输入框内时间显示
<span class="textcount">0/200字</span>
</div>
</form>
</div>
css代码
css代码，可以根据class，结合着我下方发的整体代码，看看
Js代码
// 用cosnt表示，选择出的标签
const addPendingTaskModule = document.querySelector('.add-pending-task-module');
const functionTask = document.querySelector('.function-task');
// class为form1，用于提交
const inputAddPendingTask = document.querySelector('.add-pending-task');
const submitPendingTask = document.querySelector('.submit-pending-task');
// 输入框的变化
// 绑定事件监听，事件类型为input。特性：边输入，边激活
inputAddPendingTask.addEventListener('input', function () {
// 激活后，字体的变化，输入内容长度的展示
textcount.style['font-size'] = '24px';
textcount.innerHTML = `${inputAddPendingTask.value.length}/200字`;
// 背景宽高、颜色变化
functionTask.style.height = '50px';
inputAddPendingTask.style['background-color'] = 'rgb(255,255,255)';
submitPendingTask.style['background-color'] = 'rgb(255,255,255)';
});
// 失去焦点时，一切原路返回
inputAddPendingTask.addEventListener('blur', function () {
textcount.style['font-size'] = '16px';
functionTask.addEventListener('mouseenter', function () {
functionTask.style.height = '50px';
inputAddPendingTask.style['background-color'] = 'rgb(255,255,255)';
submitPendingTask.style['background-color'] = 'rgb(255,255,255)';
});
functionTask.style.height = '0px';
inputAddPendingTask.style['background-color'] = 'rgb(242,242,242)';
submitPendingTask.style['background-color'] = 'rgb(242,242,242)';
});
console.log(addPendingTaskModule);
/*
开始对下选框，渲染
*/
const selectionList = document.querySelector('.selection-list');
let RenderSelectionList = function(){
const selectListArr = arrList.map(function(ele,index){
return `
<option value="${index}">${ele.listName}</option>
`;
});
selectionList.innerHTML = selectListArr.join('');
}
RenderSelectionList();
// 先建立一个数组、存放对象
testPriInfoTaskArr = [
{
// 输入框，输入的内容
task:'去学习鸭',
// 对应清单编号
tag: 0,
// 对应四象限编号(1-4)
quadrant:'1',
// 完成时间的储存
time: 5,
// 表示状态的切换，aaad-表示未完成，aaa-表示以完成
state: 'aaad'
},
];
// 将对应信息存入本地，最后再删除，保证本地有数据，防止后边提取是报错。
/*
任务添加
*/
// 从本地提取信息
const priInfoTaskArr = JSON.parse(localStorage.getItem('infoTaskArr')) || [];
const mainInfoTask = document.querySelector('.main-info-task');
const quadrantList = document.querySelector('.quadrant-list');
const countDown = document.querySelector('.countdown');
// 绑定提交的，监听事件
mainInfoTask.addEventListener('submit',function(e){
// 阻止冒泡
e.preventDefault();
// 检测
if(!inputAddPendingTask.value){
return alert('任务输入内容不能为空');
}
// 向一个数组中，存入提交后的信息
priInfoTaskArr.push(
{
task:inputAddPendingTask.value,
tag:selectionList.value,
quadrant:quadrantList.value,
time: countDown.value,
state:'aaad'
}
);
// 将priInfoTaskArr输入存入本地
localStorage.setItem('infoTaskArr', JSON.stringify(priInfoTaskArr));
// 重置表单
mainInfoTask.reset();
// 重新，渲染页面，这两个函数，后面会提及
display(); // 未完成任务的渲染
quadrantDisplay(); // 已完成任务的渲染
});
2、未完成任务的页面
任务-展示
任务-代码
html代码
<!-- section是一个方框，等待Js，通过innerHTML向里面添加，渲染内容 -->
<section class="uncom-reverse">
<!-- 新创建 -->
</section>
css代码
css代码，可以根据class，结合着我下方发的整体代码，看看
Js代码
// 未完成任务，代码显示界面
const uncomReverse = document.querySelector('.uncom-reverse');
let testarr = JSON.parse(localStorage.getItem('infoTaskArr')) || [];
const display = function(){
// 解压，地址储存
testarr = JSON.parse(localStorage.getItem('infoTaskArr')) || [];
// 这里运用map函数，遍历testarr数组，并且返回一个新数组
let testarrDisplay = testarr.map(function(ele,index){
// 判断条件，aaa/aaad-是判断完成与否的标志，已完成，则返回为空
if(ele.state=='aaa'){
return '';
}
// 将对象里面储存的，与四象限对应数字，转化为汉字
let flagQuadrant = '重要 / 紧急';
if(ele.quadrant==2){
flagQuadrant = '重要 /不紧急';
}else if(ele.quadrant==3){
flagQuadrant = '不重要/ 紧急';
}else if(ele.quadrant==4){
flagQuadrant = '不重要/不紧急';
}
// 用模板字符串返回
return `
<div class="main-process-task ${ele.state}">
<div class="unconfirm">
<span class="button" data-class=${index}> </span>
<span class="task-contain">
${ele.task}
</span>
</div>
<div class="attribute">
<span class="delete" data-id='${index}'>x</span>
<span class="att-tag">
${arrList[ele.tag].listName}
</span>
<span class="att-quadrant">
${flagQuadrant}
</span>
<span class="att-time" data-time = '${ele.time}'>
<span class="iconfont icon-shizhong"></span>
${ele.time}min
</span>
</div>
</div>
`;
});
// 渲染
//
/* 转化为字符串，并将其添加到相应的地方 */
uncomReverse.innerHTML =testarrDisplay.join('');
};
// 调用函数，并渲染
display();
3、已完成任务的页面
任务-展示
任务-代码
html代码
<!-- 已完成，那个绿色标签的显示 -->
<div class="completed" data-id="no">
<div class="completed-block">
<span class="iconfont icon-xiangxiadejiantou"></span>
<span>以完成</span>
</div>
<div class="completed-block-div">
<span class="completed-num">0</span>
</div>
</div>
<!-- section是一个方框，等待Js，通过innerHTML向里面添加，渲染内容 -->
<section class="com-reverse">
<!-- 已完成 -->
</section>
css代码
css代码，可以根据class，结合着我下方发的整体代码，看看
Js代码
const comReverse = document.querySelector('.com-reverse');
const completedNum = document.querySelector('.completed-num');
// 完成界面
const comDisplay = function(){
// 解压，地址储存
testarr = JSON.parse(localStorage.getItem('infoTaskArr')) || [];
// 记录变量
let count = 0;
// 这里运用map函数，遍历testarr数组，并且返回一个新数组
let testarrDisplay = testarr.map(function(ele,index){
// 判断条件，aaa/aaad-是判断完成与否的标志，已完成，则返回为空
if(ele.state=='aaad'){
return '';
}
// 将对象里面储存的，与四象限对应数字，转化为汉字
let flagQuadrant = '重要 / 紧急';
if(ele.quadrant==2){
flagQuadrant = '重要 /不紧急';
}else if(ele.quadrant==3){
flagQuadrant = '不重要/ 紧急';
}else if(ele.quadrant==4){
flagQuadrant = '不重要/不紧急';
}
// 记载，一共有多少条数据因该被渲染
count++;
// 用模板字符串返回
return `
<div class="main-process-task ${ele.state}">
<div class="unconfirm">
<span class="button" data-class=${index} style="background-color:rgb(222,222,222)"> </span>
<span class="task-contain">
${ele.task}
</span>
</div>
<div class="attribute">
<span class="delete" data-id='${index}'>x</span>
<span class="att-tag">
${arrList[ele.tag].listName}
</span>
<span class="att-quadrant">
${flagQuadrant}
</span>
<span class="att-time" data-time = '${ele.time}'>
<span class="iconfont icon-shizhong"></span>
${ele.time}min
</span>
</div>
</div>
`;
});
// 渲染
//
/* 转化为字符串，并将其添加到相应的地方 */
comReverse.innerHTML =testarrDisplay.join('');
// 展示，共渲染多少条数据
completedNum.innerHTML = count;
};
4、四象限页面
四象限-展示
四象限-代码
html代码
<!-- 四象限、整体页面 -->
<div class="m-quadrant">
<div>
<!-- 标题 -->
<div class="quadrant-top">
四象限
</div>
<!-- 四象限界面展示-分四部分 -->
<div class="quadrant-body">
<div class="importance-urgency">
<div class="impor-urgen-top impor-urgen-top-color">
重要且紧急
</div>
<div class="impor-urgen-bottom">
<!-- <div class="quadrant-task">
今天，我要去吃饭
</div> -->
</div>
</div>
<div class="importance-notUrgency">
<div class="impor-urgen-top importance-notUrgency-color">
重要不紧急
</div>
<div class="importance-notUrgency-body"></div>
</div>
<div class="urgency-unImportance">
<div class="impor-urgen-top urgency-unImportance-color">
紧急不重要
</div>
<div class="urgency-unImportance-body"></div>
</div>
<div class="unImportance-notUrgency">
<div class="impor-urgen-top unImportance-notUrgency-color">
不重要不紧急
</div>
<div class="unImportance-notUrgency-body"></div>
</div>
</div>
</div>
</div>
css代码
css代码，可以根据class，结合着我下方发的整体代码，看看
Js代码
/*
四象限 - 添加
*/
// 获取四个模块的对应标签
const imporUrgenBottom = document.querySelector('.impor-urgen-bottom');
const importanceNotUrgencyBody = document.querySelector('.importance-notUrgency-body');
const urgencyUnImportanceBody = document.querySelector('.urgency-unImportance-body');
const unImportanceNotUrgencyBody = document.querySelector('.unImportance-notUrgency-body');
// 对四象限 同时渲染
let quadrantDisplay = function(){
// 从本地解压
let testarr = JSON.parse(localStorage.getItem('infoTaskArr')) || [];
// 用map数组遍历
let displayOne = testarr.map(function(ele,index){
// 为第一象限时，返回压缩后的字符串
if(ele.quadrant==1){
return `
<div class="quadrant-task">
${ele.task}
</div>
`;
}
// 否则返回空
return '';
});
// 用map数组遍历
let displayTwo = testarr.map(function(ele,index){
// 为第二象限时，返回压缩后的字符串
if(ele.quadrant==2){
return `
<div class="quadrant-task">
${ele.task}
</div>
`;
}
// 否则返回空
return '';
});
// 用map数组遍历
let displayThree = testarr.map(function(ele,index){
// 为第三象限时，返回压缩后的字符串
if(ele.quadrant==3){
return `
<div class="quadrant-task">
${ele.task}
</div>
`;
}
// 否则返回空
return '';
});
// 用map数组遍历
let displayFour = testarr.map(function(ele,index){
// 为第四象限时，返回压缩后的字符串
if(ele.quadrant==4){
return `
<div class="quadrant-task">
${ele.task}
</div>
`;
}
// 否则返回空
return '';
});
// 将四个象限对应的数组，通过join()，转化为四个字符串，并通过innerHTML渲染到相应位置
imporUrgenBottom.innerHTML =displayOne.join('');
importanceNotUrgencyBody.innerHTML =displayTwo.join('');
urgencyUnImportanceBody.innerHTML =displayThree.join('');
unImportanceNotUrgencyBody.innerHTML =displayFour.join('');
console.log(displayOne.join(''));
console.log(1);
}
// 调用，该四象限函数，进行首次渲染
quadrantDisplay();
5、番茄钟页面
番茄钟-展示
1、番茄钟-展示
2、番茄钟-启动
确定之后，番茄中就开始倒计时，并与5min后提醒。
番茄中-代码
html代码
<!-- 简单的番茄中页面 -->
<!-- 其实根本不需要多么复杂，大多由Js填充 -->
<div class="m-tomato">
<div class="watch">
<div class="timeplay">25:00</div>
</div>
</div>
css代码
css代码，可以根据class，结合着我下方发的整体代码，看看
Js代码
/*
对钟表页面的渲染
*/
// 设置变量，用于后边接受定时器，与延时定时器
let timer;
// 运用父级委托
container.addEventListener('click',function(e){
if(e.target&&e.target.classList.contains('att-time')){
let numTime = e.target.dataset.time;
console.log(`${numTime}`);
if(confirm(`您确定要开启倒计时服务吗？我将于${numTime}分钟后提醒你`)){
clearInterval(timer); // 清除定时器
timepiece(numTime);
}
}
});
// 获取标签，用于时间显示
const timePlay = document.querySelector('.timeplay');
const timepiece = function(timeFlag) {
// 总时间（秒）
let timeAll = timeFlag * 60;
// 更新显示时间的函数
// 运用箭头函数调用，相当于java中的lambda表达式
const updateDisplay = () => {
// 将时间转换成秒数
const min = parseInt(timeAll / 60);
const second = timeAll % 60;
timePlay.innerHTML = `${min}:${second < 10 ? '0' + second : second}`;
timeAll--;
// 当倒计时归0后
if (timeAll < 0) {
alert(`定时为${timeFlag}min的定时，时间到喽`)
clearInterval(timer); // 清除定时器
}
};
// 启动定时器
// setInterval 中传递的必须是updateDisplay，而不是updateDisplay()
// 因为（setInterval需要的是一个函数的引用，以便它在每次间隔到达时调用这个函数）
timer = setInterval(updateDisplay, 1000);
// 初始显示一次时间
updateDisplay();
};
小结，
这部作品，是我参考着闪点清单的外貌做出来的。框架、逻辑思路什么的，都是自己琢磨出来的。其中仍有一些细节，我未注意，当然是由衷希望大家指点。
结束本作品后，发现js在此作品中，最大的作用，就是从本地取数据，在根据不同的要求与条件，进行渲染。
我先在这里，用百度网盘上传我的代码
总代码-html-css-Jshttps://pan.baidu.com/s/1MDWY3eibcwrnyKywrYeaDQ 提取码：slbx
等过两天，我会将我的代码传入git中，那时，我会将代码在于此上传。
这里整理的有我学习Js基础与API时，整理的大纲，有兴趣的伙伴可以看一看，只要大纲内的知识尽数掌握，这个作品，肯定不再话下
JavaScript基础框架https://note.youdao.com/web/#/file/WEB14d371baa074353c2d49f480ba2c5a86/mindmap/WEB36a83e346b9988f9be0497a00770f61e/
希望本片博客，对大家有所帮助，Go语言作品见，或者是在某个算法点见
本文转载自: https://blog.csdn.net/2302_80067378/article/details/140757744
版权归原作者 ん贤 所有， 如有侵权，请联系我们删除。
版权归原作者 ん贤 所有， 如有侵权，请联系我们删除。