todolist——基于jQuery实现教程及代码分享

编程语言 2023-04-09 07:42:54 阅读次数: 0

文章目录

技术栈

HTML，CSS，JS，jQuery，bootstrap

实现思路

基于jQuery这个强大的JS框架，可以更简单地写出更优美的，有简单动画效果的todolist。
bootstrap使页面布局更容易

作品展示

在这里插入图片描述

开发环境准备

下载jQuery

下载地址
在这里插入图片描述第一和是生产环节的，第二个是开发环节的，两个都可以用，点进去复制里面的代码，在js文件夹中创建一个文件，并粘贴就行了
在这里插入图片描述

引入jQuery

在html文件中引入刚刚下载的文件
在这里插入图片描述

代码

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/base.css">
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./jq_font/iconfont.css">
    <script src="./js/index.js"></script>
    
</head>
<body>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <!-- 使用栅格化使得todolist占4份 -->
                <div class="col-md-4 col-md-offset-4 todolist_wrapper">
                    <div class="search">
                        <input type="text">
                        <a href="javaScript:;">
                            <i class="iconfont">&#xe610;</i>
                        </a>
                    </div>
                    <div class="row">
                        <!-- todolist里面的内容占两份 -->
                        <div class="todolist col-md-10 col-md-offset-1">
                            <h3>每日待办列表</h3>
                            <div class="input_box">
                                <!-- 设置输入框 -->
                                <div class="input_box_1">
                                    <!-- 设置没打开时的输入框 -->
                                    <a href="javaScript:;" class="input_box_1_dian">
                                        <i class="iconfont">&#xe64d;</i>
                                    </a>
                                    <!-- 设置打开后的输入框 -->
                                    <div class="input_box_2 row">
                                        <!-- 设置输入文本框 -->
                                        <div class="shuru col-md-10 col-md-offset-1">
                                            <input type="text">
                                            <div class="shuru_new">
                                                <div class="shuru_new1">
                                                    <i class="iconfont">&#xe698;</i>
                                                    <input type="text" value="[8:00 ~ 10:00]">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 设置输入框底部 -->
                                        <div class="input_box_2_foot col-md-10 col-md-offset-1">
                                            <div class="box_2_label">
                                                <a href="javaScript:;">
                                                    <i class="iconfont">&#xe698;</i>
                                                    <p>完成时段</p>
                                                </a>
                                                <!-- <a href="javaScript:;">
                                                    <i class="iconfont">&#xe63d;</i>
                                                    <p>定义标签</p>
                                                </a> -->
                                            </div>
                                            <!-- 设置底部两个按钮 -->
                                            <div class="box_2_button">
                                                <a href="javaScript:;" class="box_2_add">
                                                    <i class="iconfont">&#xe64d;</i>
                                                </a>
                                                <a href="javaScript:;" class="box_2_back">
                                                    <i class="iconfont">&#xe600;</i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            <!-- 设置主要内容框 -->
                            <div class="main_wrapper">
                                <div class="nomore">
                                    <p>没有更多任务了</p>
                                </div>
                                <div class="main main_ex">
                                    <div class="main_head">
                                        <input type="text" value="测试" onfocus=this.blur()>
                                        <a href="javaScript:;" class="main_head_right">
                                            <i class="iconfont">&#xe615;</i>
                                        </a>
                                        <a href="javaScript:;" class="main_head_gai">
                                            <i class="iconfont">&#xe8cf;</i>
                                        </a>
                                        <a href="javaScript:;" class="main_head_la">
                                            <i class="iconfont">&#xe62b;</i>
                                        </a>
                                    </div>
                                    <div class="main_body main_body_ex">
                                            <i class="iconfont">&#xe698;</i>
                                            <!-- <input type="text" value="[8:00 ~ 10:00]"> -->
                                            <p>8:00 ~ 10:00</p>
                                    </div>
                                </div>

                                <!-- // 获取数据
        var data = getDate()
        // 修改数据
        data[$(".check_new").parent().index() - 2].title = main_text
        data[$(".check_new").parent().index() - 2].time = main_time
        // 保存数据
        saveDate(data) -->
                                <!-- 设置更改框 -->
                                <div class="main_check_wrapper">
                                    <div class="main_check">
                                        <div class="main_check_head">
                                            <span>任务:</span>
                                             <input type="text" placeholder="请输入你要修改的内容">
                                             <span>日期:</span>
                                             <input type="text" placeholder="请输入你要修改的时间">
                                        </div>
                                        <div class="check_button">
                                            <a href="javaScript:;" class="check_add">
                                                <i class="iconfont">&#xe64d;</i>
                                            </a>
                                            <div class="check_img">
                                                <img src="./imgs/QQ图片20220615150455.gif" alt="">
                                            </div>
                                            <a href="javaScript:;" class="check_back">
                                                <i class="iconfont">&#xe600;</i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                    </div>
    </div>
</body>
</html>

CSS代码

.wrapper{
    background-color: #323232;
    width: 100%;
    height: 100%;
}


input{
    border: none;
    outline: none;
}
/* 设置背景颜色 */
.container-fluid{
    background-color: #323232;
    /* height: 100%; */
    width: 1519px;
}

.container-fluid > .row{
    width: 1519px;
    /* height: 713px; */
}
/* 设置todolist的外边框 */
.todolist_wrapper{
    /* height: 603px; */
    min-height: 603px;
    background-color: #fcdac2;
    border-radius: 3%;
    margin-top: 55px;
    margin-bottom: 55px;
    position: relative;
    z-index: 100;
}

/* 设置todolist的内容部分 */
.todolist{
    /* background-color: red; */
    /* height: 510px; */
    margin-top: 35px;
    margin-bottom: 35px;
    /* overflow-y: scroll; */
}

/* 设置输入框1 */
.input_box{
width: 100%;
/* height: 40px; */
/* background-color: rebeccapurple; */
border-radius: 30px;
border: 1px dashed #4c3e33;
margin-top: 30px;
position: relative;
}

.input_box_1{
    text-align: center;
    transition: height 0.5s;
    height: 39px;
    overflow: hidden;
}

.input_box_1 a{
    display: block;
    line-height: 38px;
    text-decoration: none;
    /* color: #333; */
}

.input_box_1 a i{
    color: #43443d;
}

/* 设置输入框2 */
.input_box_2{
    display: block;
    position: relative;
    height: 200px;
}

.input_box_2 .shuru{
    /* display: none; */
    /* background-color: rebeccapurple; */
    margin-top: 15px;
}

.input_box_2 .shuru input{
    width: 100%;
    background-color: #fcdac2;
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: bolder;
}

/* 设置新输入框 */
.input_box_2 .shuru_new{
    position: relative;
}


.input_box_2 .shuru_new i{
   font-size: 20px;
   float: left;
}

.input_box_2 .shuru_new input{
    position: relative;
    top: -30px;
    left: 30px;
}

.shuru_new1{
    display: none;
    height: 28px;
    margin-top: 20px;
}
.shuru_new2{
    display: none;
    height: 28px;
    margin-top: 20px;
}


/* 设置输入框2的底部部分 */
.input_box_2_foot{
    position: absolute;
    /* background-color: red; */
    /* height: 40px; */
    /* width: 20px; */
    bottom: 15px;
}

/* 设置输入框2的底部标签部分 */
.box_2_label a{
    display: block;
    float: left;
    width: 90px;
    height: 30px;
    background-color:#f6cab5;
    border-radius: 15px;
    text-align: center;
    position: relative;
    text-decoration: none;
    color: #333;
    transition: color 0.5s;
}

.box_2_label a:hover i{
color: #fcdac2;
}

.box_2_label a:hover{
    color: #fcdac2;
    background-color: #323232;
    }

.box_2_label a:nth-child(2){
    position: absolute;
    top: 35px;
    left: -90px;
}

.box_2_label a i{
    font-size: 20px;
    position: absolute;
    left: 5px;
    top: -4px;
    transition: color 0.5s;
}

.box_2_label a p{
    position: absolute;
    left: 27px;
    top: -4px;
}

/* 设置底部两个按钮 */
.box_2_button a{
    display: block;
    float: right;
    background-color: #fcf4d6;
    width:  80px;
    height: 30px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}

.box_2_button a:nth-child(1){
    margin-left: 15px;
}

.box_2_button a i{
    font-size: 15px;
    position: absolute;
    left: 31px;
    top: -4px;
}

/* 设置主要内容框 */
.nomore{
width: 390px;
height: 30px;
background-color: #fef7db;
text-align: center;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
}

.nomore p{
    line-height: 30px;
}

/* 设置事情框 */
.main{
    display: none;
    width: 390px;
    height: 70px;
    background-color: #fee7ce;
    border-radius: 10px;
    margin-top: 10px;
    position: relative;
    overflow:hidden ;
    transition: height 0.5s;
}

/* 设置事情框头部 */
.main_head{
    width: 390px;
    height: 35px;
    border-radius: 5px;
    background-color: #ecbdac;
    text-align: center;
}

.main_head input{
    display: inline;
    height: 33px;
    background-color: #ecbdac;
    line-height: 33px;
    /* margin-left: 15px; */
    font-size: 20px;
    font-weight: bolder;
}

/* 设置点击完成 */
.main_head .main_head_right{
    display: block;
    width: 60px;
    height: 30px;
    background-color: #fcf4d6;
    text-decoration: none;
    float: right;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
    line-height: 35px;
    margin-top: 2px;
    margin-right: 5px;
    text-align: center;
    transition: all 0.5s;
}


.main_head .main_head_right > i{
    font-size: 25px;
    color: #d09980;
    line-height: 30px;
}

.red{
    background-color: red;
}
.main_head .main_head_gai > i{
    position: absolute;
    right: 38px;
    top: 36px;
    color: #dbb099;
    font-size: 25px;
    z-index: 100;
}

.main_head .main_head_la > i{
    position: absolute;
    right: 8px;
    top: 36px;
    color: #dbb099;
    font-size: 25px;
    z-index: 100;
}

.main_head .main_head_la > i:hover{
    color: #323232;
}

.main_head .main_head_gai > i:hover{
    color: #323232;
}

/* 设置事情框身体部 */
.main_body{
    height: 35px;
    width: 390px;
    position: relative;
    line-height: 35px;
}

.main_body i{
    margin-left: 15px;
    font-size: 25px;
}

.main_body input{
    position: absolute;
    background-color: #fee7ce;
    top:5px;
    margin-left: 10px;
}

.main_body p{
    height: 30px;
    position: absolute;
    background-color: #fee7ce;
    top:1px;
    left: 46px;
    margin-left: 10px;
}

/* 设置查询和搜索框 */
.search{
    position: absolute;
    top: 30px;
    left: 328px;
    transition: all 0.5s;
    z-index: -1;
}

.search input{
    background-color: #fcdac2;
    border: none;
    outline: none;
    /* border-top-right-radius: 15px;
    border-bottom-right-radius: 15px; */
    margin-left: 8px;
}

.search i{
    text-decoration: none;
    /* color: #333; */
   /* line-height: 20px; */
}

.search a{
    text-decoration: none;
    /* color: #323232; */
    position: absolute;
    top: 0px;
    left: 179px;
    background-color: #fcdac2;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 30px;
    text-align: center;
    border-left: 1px solid #ae9485;
    height: 22px;
    color: #333;
}

/* 设置更改框 */
.main_check_wrapper{
    display: none;
    position: absolute;
    width: 400px;
    height: 150px;
    top: 100px;
    left: 521px;
    background-color: #fdea8f;
    border-radius: 15px;
}

.main_check{
    width: 350px;
    border-radius: 30px;
    border: 1px dashed #4c3e33;
    margin: 0 auto;
    margin-top: 10px;
    /* text-align: center; */
    height: 130px;
}

/* .main_check span:nth-child(3){
    margin-left: 0;
} */

.main_check_head{
    width: 300px;
    margin: 10px auto;

}

.main_check input{
    margin-top: 10px;
    width: 247px;
    background-color: #fdea8f;
}

/* 设置更改框两个按钮 */
.check_button a{
    display: block;
    /* float: right; */
    background-color: #fcf4d6;
    width:  60px;
    height: 25px;
    border-radius: 15px;
    position: absolute;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
    text-align: center;
}

.check_button .check_add{
    top: 104px;
    left: 288px;
}

.check_button .check_back{
    top: 104px;
    left: 52px;
}

/* .check_button a:nth-child(1){
    margin-left: 15px;
} */

.check_button a i{
    font-size: 15px;
    position: absolute;
    color: #333;
    left: 22px;
    top: 2px;
}

/* 设置图片 */
/* .check_img{
    margin-left: 10px;
} */
.check_img img{
    width: 17%;
    height: 17%;
    margin-left: 140px;
    margin-top: -20px;
    transition: all 0.5s;
}

JS部分代码


$(function(){
    load()

     // 读取本地存储的数据
     function getDate(){
        var data = localStorage.getItem("todolist")
        if(data !== null){
            // 本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
            return  JSON.parse(data);
        }else{
            return[];
        }
    }

    // 保存本地存储数据
    function saveDate(data){
        localStorage.setItem("todolist", JSON.stringify(data))
    }

    // 添加函数
    function add_main(){
        // 对内容进行操作
        var input_val = $(".shuru > input").val()
        $(".main_ex input").val(input_val);
       
        // 对时间进行操作
        var input_time = $(".shuru_new1 > input").val()
        $(".main_ex p").text(input_time);

        // 添加操作
        var main = $(".main_ex").clone(true);
        // main.css("display", "block")
        main.removeClass("main_ex")
        $(".main_wrapper").before(main);

        main.fadeIn("normal")
         // 输入框重置
        $(".shuru > input").val("")
        // 标签重置
        $(".shuru_new1").css("display", "none")
        $(".box_2_label").children("a").eq(0).css("display", "block")

    }

    // 遍历数据
    function load(){
        // 读取本地存储的数据
        var data = getDate()

        // 遍历这个数据
       $.each(data, function(i,n){
            // 对内容进行操作
            $(".main_ex input").val(n.title);
       
            // 对时间进行操作
            $(".main_ex p").text(n.time);
    
            // 添加操作
            var main = $(".main_ex").clone(true);
            main.removeClass("main_ex")
            $(".main_wrapper").before(main);
    
            main.fadeIn("normal")

            if(n.done == "true"){
                $(".todolist").find(".main").eq(i).find(".main_head").find(".main_head_right").siblings("input").css("display", "none")
                $(".todolist").find(".main").eq(i).find(".main_head").find(".main_head_right").css("width", "380")
                $(".todolist").find(".main").eq(i).find(".main_head").find(".main_head_right").children("i").css("color", "#86ce40")
            }
            
       })
    }


// 点击box_1的操作
$(".input_box_1_dian").click(function(){
    // 隐藏box_1操作
        $(this).css("display", "none");
        // 改变box高度
        $(".input_box_1").css("height", "200")
        // 文本框获得焦点
        $(".shuru > input").focus()
})

// 点击返回键操作
$(".box_2_back").click(function(){
    // 显示box_1
    $(".input_box_1_dian").css("display", "block");
    // 改变box高度
    $(".input_box_1").css("height", "39")
    // 标签重置
    $(".shuru_new1").css("display", "none")
    $(".shuru_new2").css("display", "none")
    $(".box_2_label").children("a").eq(0).css("display", "block")
    $(".box_2_label").children("a").eq(1).css("display", "block")
    // 输入框重置
    $(".shuru > input").val("")
})

var index1 = 1;
// 对输入框标签进行操作
$(".box_2_label").children("a").eq(0).click(function(){
    var label_time = $(this).val
    $(this).css("display", "none")
    $(".shuru_new1").css("display", "block")
    index1 = 0;
    // console.log(index1)
})

 // 对点击添加进行操作
 $(".box_2_add").click(function(){
       
    if($(".shuru > input").val()==""){
        alert("您没有输入内容")
    }else if(index1 == 1){
        // 对内容进行操作
    var input_val = $(".shuru > input").val()
    $(".main_ex input").val(input_val);
   
    // 对时间进行操作
    var input_time = $(".shuru_new1 > input").val()
    $(".main_ex p").text("");

    // 添加操作
    var main = $(".main_ex").clone(true);
    // main.css("display", "block")
    main.removeClass("main_ex")
    $(".main_wrapper").before(main);

    main.fadeIn("normal")
     // 输入框重置
    $(".shuru > input").val("")
    // 标签重置
    $(".shuru_new1").css("display", "none")
    $(".box_2_label").children("a").eq(0).css("display", "block")


        // 文本框获得焦点
        $(".shuru > input").focus()
    }else{
        
        add_main()
        
        index1 = 1;

        // 文本框获得焦点
        $(".shuru > input").focus()
    }
})


    // 设置点击完成操作
    $(".main_head_right").click(function(){
        var timer1 = $(this).siblings("input")
        if($(this).width() < 300 && $(this).siblings("input").css("display") == "inline-block"){
            $(this).siblings("input").css("display", "none")
            $(this).css("width", "380")
            $(this).children("i").css("color", "#86ce40")

            // 获取数据
            var data = getDate()
            // 修改数据
            data[$(this).parent().parent().index() - 2].done = "true"
            console.log($(this).parent().parent().index());
            // 保存数据
            saveDate(data)
        }else{
            $(this).css("width", "60",function(){
                
            })
            setTimeout(function(){
                timer1[0].style.display = "inline"
            }, 500)
            $(this).children("i").css("color", "#d09980")

            // 获取数据
            var data = getDate()
            // 修改数据
            data[$(this).parent().parent().index() - 2].done = "false"
            console.log($(this).parent().parent().index());
            // 保存数据
            saveDate(data)
        }
    })

    var arr1 = new Array();

    // 设置删除操作
    $(".main_head_la").click(function(){
        var timer2 = $(this).parent("div").parent("div")
        $(this).parent("div").parent("div").css("height", "0")
        setTimeout(function(){
            // console.log(123)
            timer2[0].style.display = "none"
        }, 500)

        // 获取数据
        var data = getDate()
        // 修改数据
        // console.log($(this).parent
        
        
        GH().parent().index();
        data.splice($(this).parent().parent().index() - 2,1);
        // 保存数据
        saveDate(data)
        // console.log(getDate());

    })

    // 设置查操作

    // 查找框打开关闭
    var index2 = 1;
    $(".search > a").click(function(){
        if(index2 == 0){
            $(".search").css("left", "328px")
            $(".search > input").val("")
            index2 = 1
        }else{
            $(".search").css("left", "498px")
            index2 = 0
        }   
        //   console.log($(".search").offset())
    })

    // 查找框功能
    document.addEventListener("keyup",function(e){
        if(e.key == "Enter" && $(".search > input").val() != ""){
            var check_num = $(".search > input").val()
            var list_num = $(".main_head")

            // console.log(list_num.find("input"));
            var list_arr = list_num.find("input")
            // console.log(list_arr);
            for(var i = 0; i<list_arr.length - 1; i++){
                if(list_arr[i].value.includes(check_num)){
                    $(list_arr[i]).parent(".main_head").parent(".main").fadeOut("normal",function(){
                        $(".input_box").after($(this))
                        $(this).fadeIn("normal")
                        
                        // console.log($(this));
                    })
                    console.log(i);
                }
            }
            //     if(list_num.find("input").val().includes(check_num)){
            //         console.log(0)
            // }

        }
    })

    // 设置改操作
    $(".main_head_gai").click(function(){
        // 获取本来文本框的值
        var main_text = $(this).siblings("input").val()
        var main_time = $(this).parent().siblings(".main_body").find("p").html()
        $(".main_check_wrapper").stop().fadeIn("normal")
        // 把值赋给更改框
        $(".main_check_head").find("input").eq(0).val(main_text)
        if(main_time == ""){
             $(".main_check_head").find("input").eq(1).val("[8:00 ~ 10:00]")
        }else{
            $(".main_check_head").find("input").eq(1).val(main_time)

        }

        // 给点击改操作的文本框添加一个类名
        $(this).parent().addClass("check_new")
    })

    // 点击更概况的添加按钮
    $(".check_add").click(function(){
        var main_text = $(".main_check_head").find("input").eq(0).val()
        var main_time = $(".main_check_head").find("input").eq(1).val()
        $(".main_check_wrapper").stop().fadeOut("normal")

        $(".check_new > input").val(main_text)
        $(".check_new").siblings(".main_body").find("p").text(main_time)
        $(".main_head").removeClass("check_new")
    })

    $(".check_back").click(function(){
        $(".main_check_wrapper").stop().fadeOut("normal")
        $(".main_head").removeClass("check_new")
    })

    // 有趣的东西
    var index3 = 1
    $(".check_img > img").click(function(){
        if(index3 == 1){
            $(this).css("width","50%")
            $(this).css("height","50%")
            $(this).css("margin-left","90px")
            $(this).css("margin-top","55px")
            index3 = 0
        }else{
            $(this).css("width","17%")
            $(this).css("height","17%")
            $(this).css("margin-left","140px")
            $(this).css("margin-top","-20px")
            index3 = 1
        }
    })

})

源码分享（含图片，文件等资源）

链接：源码
提取码：hzor

猜你喜欢

转载自blog.csdn.net/Cuichenyang158/article/details/127763025
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022