todolist——JS实现教程及代码分享

可以叫我小崔

已于 2022-11-12 17:26:09 修改

阅读量918

点赞数

文章标签： javascript css css3

于 2022-11-09 09:00:30 首次发布

本文链接：https://blog.csdn.net/Cuichenyang158/article/details/127762622

版权

技术栈

HTML，CSS，JS

实现思路

基于h5+css的静态页面实现，和JS对DOM和BOM的操作来实现的todolist小案例

作品展示

在这里插入图片描述
拥有添加功能，已完成功能，定时功能（删除功能暂时没有，想要的同学可以看一下我的其它博客，在jQuery实现的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>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./fa/css/all.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <script src="./index.js"></script>
</head>
<body>
    <div class="wrapper w">

        <!-- 设置头部 -->
        <div class="nei_wrapper clearfix">
            <div class="head_wrapper nei_w">
                <!-- 设置头部左边 -->
                <div class="head_left">
                    <h1>我的一天</h1>
                    <div class="ltime">
                        五月 17日 星期日
                    </div>
                </div>
                <!-- 设置头部右边 -->
                <div class="head_right">
                    <div class="rtime">今天</div>
                </div>
            </div>

            <!-- 设置todolist的边框 -->
            <div class="todolist_wrapper nei_wrapper">
                <!-- 设置添加框 -->
                <div class="intodo nei_wrapper">
                    <i class="fas fa-plus"></i>
                    <input type="text" name="" id="" placeholder="添加任务" class="shuru">
                </div>

                <!-- 设置主要内容框 -->
                
                <!-- 设置工作框 -->
                <div class="do_list"></div>

                <div class="done_list">
                    <div class="done_ke">
                        <!-- 设置输入框 -->
                        <input type="checkbox" class="check">
                        <input type="text" name="" id=""  class="inp">
                        <!-- 收藏 -->
                        <div class="xing">
                            <a href="javaScript:;" class="xinga">
                                <i class="iconfont">&#xe601;</i>
                            </a>
                        </div>
                        <!-- 定时 -->
                        <div class="dingshi">
                            <a href="javaScript:;">定时</a>
                        </div>
                        <!-- 定时上拉框 -->
                        <div class="dingshi_list">
                            <ul>
                                <li>
                                    <a href="javaScript:;">01分钟</a>
                                </li>
                                <li>
                                    <a href="javaScript:;">30分钟</a>
                                </li>
                                <li>
                                    <a href="javaScript:;">01小时</a>
                                </li>
                                <li>
                                    <a href="javaScript:;">5小时</a>
                                </li>
                                <li>
                                    <a href="javaScript:;">24小时</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        
   

    </script>
</body>
</html>

CSS部分

/* 消除页面塌陷和外边距重叠 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

*{
    list-style: none;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #333;
}

.w{
    width: 1000px;
    height: 500px;
}

.neiw{
    width: 800px;
}

/* 设置大边框 */
.wrapper{
    margin: 50px auto;
    border: 2px solid #cbcbcb;
}

/* 设置内容边框 */
.nei_wrapper{
    width: 950px;
    margin: 0 auto;
  
    /* background-color: yellow; */
}

/* 设置头部边框 */
.head_wrapper{
    margin: 0 auto;
    margin-top: 25px;
    /* height: 20px; */
    /* background-color: pink; */
}

/* 设置头部左边 */
.head_left{
    float: left;
    /* color: #464547; */
}

.head_left h1{
    color: #464547;
    font-size: 31px;
}

.ltime{
    color: #b6bcbe;
}

/* 设置头部右边 */
.head_right{
    float: right;
    position: relative;
}

.head_right i{
    position: absolute;
    top: 0;
    left: -90px;
    color: #8e908f;
}

.head_right .rtime{
    position: absolute;
    width: 40px;
    top: 0;
    left: -60px;
    color: #8e908f;
}

.head_right .updown{
    position: absolute;
    top: 0;
    left: 0;
    color: #8e908f;
}

/* 设置todolist */
.todolist_wrapper{
    margin-top: 115px;
    /* background-color: pink; */
}

/* 设置添加框 */
.intodo{
    position: relative;
    /* background-color: pink; */
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 10px;
}

.intodo i{
    position: absolute;
    font-size: 20px;
    color: #a6a6a6;
    /* line-height: 20px; */
    top: 2px;
    left: 5px;
}

.intodo input{
    margin-left: 25px;
    height: 25px;
    width: 850px;
    border: none;
    outline: none;
}

/* 设置主要内容框 */
.do_list{
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.done_ke{
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 20px;
    border-top: none;
}

.do_list .yin{
    display: none;
}

.done_list{
    display: none;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    
}

.do_list .check{
    position: absolute;
    top: 6px;
    left: 8px;
    /* border-radius: 50%; */

}

.do_list .inp{
    margin-left: 50px;
    height: 25px;
    width: 850px;
    /* width: 100%; */
    border: none;
    outline: none;
    color: #333;
    text-decoration: none;
}

.do_list .xing{
    position: absolute;
    top: -1px;
    right: 8px;
    /* color: yellow; */
}

/* 设置定时 */
.dingshi{
    width: 50px;
    height: 20px;
    position: absolute;
    top: -1px;
    right: 30px;
    text-align: center;
    background-color: none;
    /* box-shadow: #464547 2px 2px 10px; */

}

.dingshi a{
    line-height: 20px;
    color: #b6c2d5;
}

/* 设置定时框 */
.dingshi_list{
    display: none;
    position: absolute;
    top: -115px;
    right: 28px;
    box-shadow: #464547 2px 2px 10px;
    background-color: #fff;
}

.dingshi_list li{
    /* width: 100px; */
    height: 20px;
    margin: 2px;
    /* float: left; */
}

.dingshi_list li:hover{
    background-color: #edf0f1;
}

js部分

window.addEventListener('load', function(){
    // console.log(123);
    // 记录输入内容
    var shuru = document.querySelector('.shuru');
    var done_ke = document.querySelector('.done_ke');
    var done_list = document.querySelector('.done_list');
    var do_list = document.querySelector('.do_list');
    var xing = document.querySelector('.xinga');
    var dingshi = document.querySelector('.dingshi');

    document.addEventListener('keyup',function(e){
        // 按下回车键且文本内容不为空时
        if(e.key=='Enter'&&shuru.value!=''){
            // 克隆需要复制的部分
            var lili = done_ke.cloneNode(true);
            // console.log(lili);
            // 获取输入框的内容
            var nei = shuru.value;
            // 把输入框的内容改为空
            shuru.value = '';
            // 新创建的框中添加获取的输入框内容
            lili.children[1].value = nei;
            // 把克隆的部分添加到最上面
            do_list.insertBefore(lili,do_list.children[0]);   

            // 在新建一行内容后，给内容添加点击事件
            lili.children[0].addEventListener('click', function(){
                if(this.checked){
                    // 添加到最下面
                    do_list.appendChild(lili);
                    // 字体变色
                    lili.children[1].style.color = '#a6a6a6';
                    // 添加下划线
                    lili.children[1].style.textDecoration = 'line-through double';
                }else{
                    // 添加到最上面
                    do_list.insertBefore(lili,do_list.children[0]);
                    // 字体变色
                    lili.children[1].style.color = '#333';
                    // 删除下划线
                    lili.children[1].style.textDecoration = 'none';
                }
            })
            // 设置点击收藏事件
            var num1 = 0;
            lili.children[2].addEventListener('click', function(){
                if(num1 == 0){
                    // 改变字符以及颜色
                    this.children[0].children[0].innerHTML = '&#xe600;';
                    this.children[0].children[0].style.color = 'red';
                    num1 = 1;
                }else if(num1 == 1){
                    // 变回来
                    num1 = 0;
                    this.children[0].children[0].innerHTML = '&#xe601;';
                    this.children[0].children[0].style.color = 'none';
                }
            })
            // 设置定时事件
            // 鼠标经过时
            lili.children[3].addEventListener('mouseover',function(){
                // 改变颜色
                lili.children[3].style.backgroundColor = '#7d9b94';
                lili.children[3].children[0].style.color = '#ffffff';
            })
            // 鼠标离开时
            lili.children[3].addEventListener('mouseout',function(){
                // 改变颜色
                lili.children[3].style.backgroundColor = '#ffffff';
                lili.children[3].children[0].style.color = '#b6c2d5';
            })
            // 鼠标点击时
            var num3 = 0;
            lili.children[3].addEventListener('click',function(){
                // 定时窗口关闭和打开
                if(num3 == 0){
                    lili.children[4].style.display = 'block';
                    num3 = 1;
                }else if(num3 == 1){
                    lili.children[4].style.display = 'none';
                    num3 = 0;
                }
            })
            // 设置定时事件
            // 一分钟
           lili.children[4].children[0].children[0].addEventListener('click',function(){
            lili.children[4].style.display = 'none';
               setTimeout(function(){
                var linei = lili.children[1].value;
                alert('注意时间到了 ' + linei);
               },2000)
           })

            // 30分钟
           lili.children[4].children[0].children[1].addEventListener('click',function(){
            lili.children[4].style.display = 'none';
               setTimeout(function(){
                var linei = lili.children[1].value;
                alert('注意时间到了 ' + linei);
               },1800000)
           })

            // 1小时
           lili.children[4].children[0].children[2].addEventListener('click',function(){
            lili.children[4].style.display = 'none';
               setTimeout(function(){
                var linei = lili.children[1].value;
                alert('注意时间到了 ' + linei);
               },3600000)
           })

            // 5小时
           lili.children[4].children[0].children[3].addEventListener('click',function(){
            lili.children[4].style.display = 'none';
               setTimeout(function(){
                var linei = lili.children[1].value;
                alert('注意时间到了 ' + linei);
               },18000000)
           })

            // 24小时
           lili.children[4].children[0].children[4].addEventListener('click',function(){
            lili.children[4].style.display = 'none';
               setTimeout(function(){
                var linei = lili.children[1].value;
                alert('注意时间到了 ' + linei);
               },86400000)
           })

        }
    })
    
})