TodoList表单功能实现

最新推荐文章于 2024-09-07 21:36:11 发布

走，我们去抽风

最新推荐文章于 2024-09-07 21:36:11 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap 前端 javascript

本文链接：https://blog.youkuaiyun.com/LittleWhiteCode6/article/details/127166534

本文介绍了一个基于HTML、CSS和JavaScript的To-Do List应用实现细节，利用jQuery进行交互操作，采用Bootstrap进行页面布局美化，并通过localStorage进行数据持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

实现任务的增删改查，使用jquery中的api实现增删改查，bootstrap中的布局美化页面。

页面内容：

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="bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="todolist.css">
</head>

<body background="images/QQ图片20220505084348.png">
    <div id="scenes">
        <div id="Modify-Popup">
            <h3 style="margin-top: 30px; margin-left: 30px;">请输入标题</h3>
            <input type="text" id="Modify-box" class="form-control" style="width: 350px; height: 50px;margin-top: 20px; margin-left: 20px; font-size: 18px;">
            <div class="row" style="margin-top: 50px;">
                <div class="col-md-5 col-md-offset-1" style="height: 50px;">
                    <button id="Modify-confirm" class="btb-primary" style="width:100%; height: 100%; font-size: 20px; background-color: rgb(30, 144, 255); border: none;">确定</button>
                </div>
                <div class="col-md-5" style="height: 50px;">
                    <button id="Modify-cancel" class="btb-success" style="width:100%; height: 100%;font-size: 20px; border: none;">取消</button>
                </div>
            </div>
        </div>
    </div>
    <h2 style="padding-left: 100px;">Microsoft To Do</h2>
    <div class="container" style="margin-left: 100px;">
        <div class="row">
            <div class="col-md-3" style="height: 670px; background-color:rgb(243, 243, 243); border-radius: 10px; padding-top: 10px;">
                <div style="height: 70px;" id="user">
                    <div class="col-md-4">
                        <img src="images/QQ图片20220505085816.png" alt="" style="width: 70px;">
                    </div>
                    <div class="col-md-7">
                        <h4><b>罗森</b></h4>
                        <p style="color:rgb(116, 116, 116)">1291322316@qq.com</p>
                    </div>
                </div>
                <ul id="gl">
                    <li>管理账户</li>
                    <li>设置</li>
                    <li>同步</li>
                </ul>
                <div>
                    <div class="row">
                        <div class="col-md-5 col-md-offset-1">
                            <h4>任务列表</h4>
                        </div>
                        <div class="col-md-3 col-md-offset-3">
                            <h4 style="font-size: 30px; text-align: center; position: absolute; top: -7px; ">
                                <a href="javascript:;" class="addrenwu" style="color: rgb(51, 51, 51); text-decoration: none;">+</a>
                            </h4>
                        </div>
                    </div>
                    <div class="pre-scrollable" style="max-height: 1000px; width: 260px; height: 470px;">
                        <ul class="tesk list-unstyled" id="teskone">
                            <!-- <li id="cloneli"><span>内容1</span>
                                <a href="javascript:;" id="dlt"><img src="images/pencil.svg" alt=""></a>
                                <a href="javascript:;" class="trash"><img src="images/trash3.svg" alt=""></a>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <div class="row" style="margin-top: 15px;">
                    <div class="col-md-10" style="height: 40px;">
                        <input type="text" id="search-box" class="form-control" placeholder="请输入标题" style="height: 40px; font-size: 17px; border-radius: 20px; text-indent: 1em;">
                    </div>
                    <div class="col-md-2" style="height: 40px;">
                        <a href="javascript:;" id="search"><img src="images/search.svg" alt="" style="height: 25px; margin-top: 7px; margin-left: -10px;"></a>
                    </div>
                </div>
            </div>
            <div class=" col-md-8 col-md-offset-1" style="position: relative; height: 670px; background-image: linear-gradient(rgb(23, 46, 60), #9198e5); border-radius: 10px; ">
                <h2 style="color: #fff; margin-left: 20px;">每日计划</h2>
                <div id="notesk" style="position: absolute; width: 230px; height: 200px; background-color: rgba(0,0,0,0.3); border-radius: 10px; top: 180px; left: 260px;">
                    <img src="images/textbook.png" alt="" style="width: 100px; margin-left: 67px;">
                    <h3 style="color: #fff; text-align: center; margin-top: 0px;">专注于你的一天</h3>
                    <p style="color: #fff; text-align: center;">丈夫志四海，万里犹比邻</p>
                    <p style="color: #fff; text-align: center;">天行健，君子以自强不息</p>
                </div>
                <ul id="Plan-content" style="position: absolute;" class="list-unstyled">
                    <!-- <li id="clone-content">
                        <div class="row">
                            <div class="col-md-1">
                                <a href="javascript:;" class="fashion" style="display: inline-block; width: 16px; height: 16px; border-radius: 8px; border: 2px solid rgb(27, 27, 27); margin-top: 13px; margin-left: 20px;"></a>
                            </div>
                            <div class="col-md-8">
                                <p style="width: 500px; font-size: 20px; padding-top: 7px;"></p>
                            </div>
                            <div class="col-md-1 col-md-offset-1" style="margin-top: 6px;">
                                <button id="content-dlt" class="btn">删除</button>
                            </div>
                        </div>
                    </li> -->
                </ul>
                <input id="addplan" type="text" class="form-control" style="position: absolute; left:90px; bottom: 20px; width: 600px; height: 42px; font-size: 20px; text-indent: 1em;" placeholder="请输入今日计划...">

            </div>
        </div>
    </div>
    <ul>
        <li id="clone-content">
            <div class="row">
                <div class="col-md-1">
                    <a href="javascript:;" class="fashion" style="display: inline-block; width: 16px; height: 16px; border-radius: 8px; border: 2px solid rgb(27, 27, 27); margin-top: 13px; margin-left: 20px;"></a>
                </div>
                <div class="col-md-8">
                    <p style="width: 500px; font-size: 20px; padding-top: 7px;"></p>
                </div>
                <div class="col-md-1 col-md-offset-1" style="margin-top: 6px;">
                    <button id="content-dlt" class="btn">删除</button>
                </div>
            </div>
        </li>
        <li id="cloneli"><span>内容1</span>
            <a href="javascript:;" id="dlt"><img src="images/pencil.svg" alt=""></a>
            <a href="javascript:;" class="trash"><img src="images/trash3.svg" alt=""></a>
        </li>
    </ul>
</body>
<script src=" jquery-ui-1.13.1.custom/jquery-ui-1.13.1.custom/jquery-ui.min.js "></script>
<script src="bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js "></script>
<script src="todolist.js "></script>

</html>

JS和JQuery代码

$(function() {
    var Modify = 0;
    var str = '';
    var u;
    var str;
    $('#gl').slideUp(0);
    $('#scenes').hide();
    $('#cloneli').hide();
    $('#addplan').hide();
    $('#clone-content').hide();
    $('#user').click(function() {
        $('#gl').slideToggle(500);
    });
    var todoli = localStorage.getItem('todolist').split(',');
    for (let index = 0; index < todoli.length; index++) {
        if (todoli[index] != '') {
            var $cloneli = $('#cloneli').clone(true);
            $cloneli.children('span').html(todoli[index]);
            $('#teskone').prepend($cloneli); //添加li 
            $cloneli.show();
        }
    }


    $('#cloneli').bind({
        mouseenter: function() {
            $(this).css('background-color', 'rgb(235, 235, 235)');
        },
        mouseleave: function() {
            $(this).css('background-color', 'rgb(255, 255, 255)');
        },
        click: function() {
            console.log($('#teskone>li'));
            console.log($(this));
            str = $(this).children('span').html();
            $('#Plan-content').children('li').remove();
            console.log(localStorage.getItem(str).split(','));
            u = localStorage.getItem(str).split(',');
            $('#addplan').show();
            for (let index = 0; index < u.length; index++) {
                if (u[index] != '') {
                    var $cloneaddplan = $('#clone-content').clone(true);
                    $cloneaddplan.find('p').html(u[index]);
                    $('#Plan-content').prepend($cloneaddplan);
                    $cloneaddplan.show();
                }
            }
        }
    });
    $('#Modify-confirm').click(function() {
        $('.tesk>li:nth-of-type(' + Modify + ')>span').html($('#Modify-box').val());
        $('#Modify-box').val('');
        $('#scenes').hide();
    });
    $('#Modify-box').keydown(function(e) {
        if (e.keyCode == 13) {
            $('.tesk>li:nth-of-type(' + Modify + ')>span').html($('#Modify-box').val());
            $('#Modify-box').val('');
            $('#scenes').hide();
        }
    });
    $('#Modify-cancel').click(function() {
        $('#Modify-box').val('');
        $('#scenes').hide();
    });
    $('#dlt>img').bind({
        mouseenter: function() {
            $(this).attr("src", "images/pencil-fill.svg");
        },
        mouseout: function() {
            $(this).attr("src", "images/pencil.svg");
        },
        click: function() {
            $('#scenes').show();
            $('#Modify-box').focus();
            Modify = $(this).parent().parent().index() + 1;
        }
    });
    $('.trash>img').bind({
        mouseenter: function() {
            $(this).attr("src", "images/trash-fill.svg");
        },
        mouseout: function() {
            $(this).attr("src", "images/trash3.svg");
        },
        click: function() {
            if ($('#teskone>li').length == 0) {
                $('#addplan').hide();
            }
            var t = localStorage.getItem('todolist').split(',');
            let b = -1;
            for (let index = 0; index < t.length; index++) {
                if (t[index] == $(this).parent().siblings("span").html()) {
                    b = index;
                    break;
                }
            }
            t.splice(b, 1);
            localStorage.setItem('todolist', t);
            localStorage.removeItem($(this).parent().siblings('span').html());
            $(this).parent().parent().remove();
        }
    });
    $('#teskone>li').bind({
        mouseenter: function() {
            $(this).css('background-color', 'rgb(235, 235, 235)');
        },
        mouseleave: function() {
            $(this).css('background-color', 'rgb(255, 255, 255)');
        },
        click: function() {
            $('#notesk').hide();
            str = $(this).children('span').html();
            $('#Plan-content').children('li').remove();
            console.log(localStorage.getItem(str).split(','));
            u = localStorage.getItem(str).split(',');
            $('#addplan').show();
            for (let index = 0; index < u.length; index++) {
                if (u[index] != '') {
                    var $cloneaddplan = $('#clone-content').clone(true);
                    $cloneaddplan.find('p').html(u[index]);
                    $('#Plan-content').prepend($cloneaddplan);
                    $cloneaddplan.show();
                }
            }
            if ($('#Plan-content').children('li').length == 0) {
                $('#notesk').show();
            }
        }
    });

    $('.addrenwu').click(function() {
        var $linew = $('<li><input></li>')
        $('#teskone').prepend($linew);
        $linew.children('input').focus();
        $linew.children('input').blur(function() {
            if ($(this).val() != '') {
                var $cloneli = $('#cloneli').clone(true);
                $cloneli.children('span').html($(this).val());
                localStorage.setItem($(this).val(), '');
                var a = localStorage.getItem('todolist').split(',');
                a.push($(this).val());
                localStorage.setItem('todolist', a);
                $('#teskone').prepend($cloneli); //添加li
                $cloneli.show();
                $cloneli.bind({
                    mouseenter: function() {
                        $(this).css('background-color', 'rgb(235, 235, 235)');
                    },
                    mouseleave: function() {
                        $(this).css('background-color', 'rgb(255, 255, 255)');
                    },
                    click: function() {
                        $('#notesk').hide();
                        str = $(this).children('span').html();
                        $('#Plan-content').children('li').remove();
                        console.log(localStorage.getItem(str).split(','));
                        u = localStorage.getItem(str).split(',');
                        $('#addplan').show();
                        for (let index = 0; index < u.length; index++) {
                            if (u[index] != '') {
                                var $cloneaddplan = $('#clone-content').clone(true);
                                $cloneaddplan.find('p').html(u[index]);
                                $('#Plan-content').prepend($cloneaddplan);
                                $cloneaddplan.show();
                            }
                        }
                        if ($('#Plan-content').children('li').length == 0) {
                            $('#notesk').show();
                        }
                    }
                });
                $cloneli.click();
                $(this).parent().remove();
            } else {
                $(this).parent().remove();
            }
        });
        $linew.children('input').keydown(function(e) {
            if (e.keyCode == 13) {
                if ($(this).val() != '') {
                    // var n = localStorage.getItem('todolistcontent').split(',');
                    var $cloneli = $('#cloneli').clone(true);
                    $cloneli.children('span').html($(this).val());
                    localStorage.setItem($(this).val(), '');
                    var a = localStorage.getItem('todolist').split(',');
                    a.push($(this).val());
                    localStorage.setItem('todolist', a);
                    $('#teskone').prepend($cloneli); //添加li 
                    $cloneli.show();

                    $cloneli.bind({
                        mouseenter: function() {
                            $(this).css('background-color', 'rgb(235, 235, 235)');
                        },
                        mouseleave: function() {
                            $(this).css('background-color', 'rgb(255, 255, 255)');
                        },
                        click: function() {
                            $('#notesk').hide();
                            str = $(this).children('span').html();
                            $('#Plan-content').children('li').remove();
                            console.log(localStorage.getItem(str).split(','));
                            u = localStorage.getItem(str).split(',');
                            $('#addplan').show();
                            for (let index = 0; index < u.length; index++) {
                                if (u[index] != '') {
                                    var $cloneaddplan = $('#clone-content').clone(true);
                                    $cloneaddplan.find('p').html(u[index]);
                                    $('#Plan-content').prepend($cloneaddplan);
                                    $cloneaddplan.show();
                                }
                            }
                            if ($('#Plan-content').children('li').length == 0) {
                                $('#notesk').show();
                            }
                        }
                    });

                    $cloneli.click();
                    $(this).parent().remove();
                } else {
                    $(this).parent().remove();
                }
            }
        });
    });
    $('#search').click(function() {
        if ($('#search-box').val() != '') {
            for (let index = 0; index < $('#teskone>li').length; index++) {
                if ($('#teskone>li:nth-of-type(' + (index + 1) + ')>span').text() == $('#search-box').val()) {
                    $('#teskone>li:nth-of-type(' + (index + 1) + ')').css('background-color', 'rgb(235, 235, 235)');
                    $('#teskone').prepend($('#teskone>li:nth-of-type(' + (index + 1) + ')'));
                    $('#search-box').val('');

                    break;
                }
            }
        }
    });
    $('#search-box').keydown(function(e) {
        if (e.keyCode == 13) {
            if ($('#search-box').val() != '') {
                for (let index = 0; index < $('#teskone>li').length; index++) {
                    if ($('#teskone>li:nth-of-type(' + (index + 1) + ')>span').text() == $('#search-box').val()) {
                        $('#teskone>li:nth-of-type(' + (index + 1) + ')').css('background-color', 'rgb(235, 235, 235)');
                        $('#teskone').prepend($('#teskone>li:nth-of-type(' + (index + 1) + ')'));
                        $('#search-box').val('');
                        break;
                    }
                }
            }
        }
    });


    $('#addplan').keydown(function(e) {
        if (e.keyCode == 13 && $(this).val() != '') {
            var $cloneaddplan = $('#clone-content').clone(true);
            $cloneaddplan.find('p').html($(this).val());
            // ctt(u).split(',');
            // ctt[u].push($(this).val());
            u.push($(this).val());
            localStorage.setItem(str, u);
            $('#Plan-content').prepend($cloneaddplan);
            $cloneaddplan.show();
            $(this).val('');
            if ($('#Plan-content').children('li').length != 0) {
                $('#notesk').hide();
            }
        }
    });
    $('.fashion').click(function() {
        // var $shearplan = $(this).parent().parent().parent();
        // $shearplan.find('p').css('text-decoration', 'line-through');
        // $shearplan.find('a').css('background-color', 'rgba(26, 9, 85, 0.8)')
        // $('#Plan-content').append($shearplan);
        u = localStorage.getItem(str).split(',');
        for (let index = 0; index < u.length; index++) {
            if (u[index] == $(this).parent().parent().find('p').html()) {
                u.splice(index, 1);
            }
        }
        localStorage.setItem(str, u);
        $(this).parent().parent().parent().remove();
        if ($('#Plan-content').children('li').length == 0) {
            $('#notesk').show();
        }
    });
    $('#content-dlt').click(function() {
        u = localStorage.getItem(str).split(',');
        for (let index = 0; index < u.length; index++) {
            if (u[index] == $(this).parent().parent().find('p').html()) {
                u.splice(index, 1);
            }
        }
        localStorage.setItem(str, u);
        $(this).parent().parent().parent().remove();
        if ($('#Plan-content').children('li').length == 0) {
            $('#notesk').show();
        }
    });
});