菜单 搜索
首页 前端知识 JavaScript实现清单应用

JavaScript实现清单应用

2024-08-16 22:08:00 前端知识 前端哥 599 321 我要收藏

涉及到的知识点：

1、合理运用番茄钟，支持定时提醒

2、需要使用localstorage进行数据管理

3、实现四象限的展示

4、需要应用JS实现多种动漫效果

目录

涉及到的知识点：

先展示我的主页面：

清单页面

四象限页面：

番茄钟页面：

为了方便理解，我紧着重点讲解

0、页面如何切换

html框架

css框架

Js框架 

1、清单页面

输入框-展示

输入框-代码

html代码

css代码

Js代码

2、未完成任务的页面

任务-展示

任务-代码

html代码

css代码

Js代码

3、已完成任务的页面

任务-展示

任务-代码

html代码

css代码

Js代码

4、四象限页面

四象限-展示

四象限-代码

html代码

css代码

Js代码

5、番茄钟页面

番茄钟-展示

1、番茄钟-展示

2、番茄钟-启动

番茄中-代码

html代码

css代码

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">&nbsp;&nbsp;&nbsp;5min</option>
                                        <option value="10">&nbsp;&nbsp;10min</option>
                                        <option value="20">&nbsp;&nbsp;20min</option>
                                        <option value="30">&nbsp;&nbsp;30min</option>
                                        <option value="60">&nbsp;&nbsp;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}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        &nbsp;&nbsp;
                        <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>
                        &nbsp;&nbsp;
                        <span class="att-quadrant">
                            ${flagQuadrant}
                        </span>
                        &nbsp;&nbsp;
                        <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)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            &nbsp;&nbsp;
                            <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>
                            &nbsp;&nbsp;
                            <span class="att-quadrant">
                                ${flagQuadrant}
                            </span>
                            &nbsp;&nbsp;
                            <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-Jsicon-default.png?t=N7T8https://pan.baidu.com/s/1MDWY3eibcwrnyKywrYeaDQ 提取码：slbx

等过两天，我会将我的代码传入git中，那时，我会将代码在于此上传。

        

这里整理的有我学习Js基础与API时，整理的大纲，有兴趣的伙伴可以看一看，只要大纲内的知识尽数掌握，这个作品，肯定不再话下

JavaScript基础框架icon-default.png?t=N7T8https://note.youdao.com/web/#/file/WEB14d371baa074353c2d49f480ba2c5a86/mindmap/WEB36a83e346b9988f9be0497a00770f61e/

希望本片博客，对大家有所帮助，Go语言作品见，或者是在某个算法点见

转载请注明出处或者链接地址：https://www.qianduange.cn//article/15882.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

**让数据呈现更简单 —— json2html 开源项目**

2024-08-23 21:08:35

XML与JSON的使用

2024-08-23 21:08:27

Amazon OpenSearch Service 现在支持 JSON Web Token（JWT）身份验证和授权

2024-08-23 21:08:16

Java最全JSON解析教程（Gson、FastJson、Jackson），spring的设计模式面试题

2024-08-23 20:08:51

uniapp 动态生成page.json，自动拆分页面及自动注册页面

2024-08-23 20:08:50

Delphi使用SuperObject和使用SuperArray创建JSon

2024-08-23 20:08:47

4.postman批量运行及json、cvs文件运行

2024-08-23 20:08:30

Java学习｜JSON 处理库：Gson、FastJson、Jackson的比较与使用指南

2024-08-23 20:08:29

解决com.alibaba.fastjson.JSONException: default constructor not found的问题

2024-08-23 20:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
3

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
4

npm的使用

2024-08-18 00:08:131000
5

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
6

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
7

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
8

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
9

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
10

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！