技術スタック

HTML，CSS，JS，jQuery，ブートストラップ

実装のアイデア

強力な JS フレームワークである jQuery に基づいて、シンプルなアニメーション効果を備えたより美しい todolist を簡単に作成できます。
Bootstrap でページレイアウトが簡単に

ギャラリー

ここに画像の説明を挿入

開発環境の準備

jQueryをダウンロード

1つ目のダウンロードアドレス
ここに画像の説明を挿入は本番用リンク、2つ目は開発用リンクのどちらでも使用できますクリックして中のコードをコピーし、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

todolist — チュートリアルとコード共有を実装するための jQuery に基づく

記事ディレクトリ