TodoList表单功能实现

最新推荐文章于 2024-09-07 21:36:11 发布
原创 最新推荐文章于 2024-09-07 21:36:11 发布 · 406 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #前端 #javascript

本文介绍了一个基于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();
        }
    });
});

 

vue实现todolist功能(初学者适用)
Banality_human_workers的博客
06-30 4725
todolist案例实现: 完成 todolist首先要清楚 基本的业务逻辑 需要完成哪些功能： 添加功能（添加后可存储在本地 即刷新后页面中仍有数据） 删除功能（删除后可以存储在页面） 修改功能（同上） 下面直接上代码： <div class="header"> <!-- 头部 --> <span class="logo">ToDoList</span> <!-- keydown 键盘事件 按下enter直接添加
[vue] todoList,待办项列表实现
蹲在人生路上的那只猫
07-21 2200
直接上图吧！ 然后上代码啦！
to do list
08-16
简单实用的 to do list 表格，方便用来做时间管理
TODO List - 任务表
weixin_34107739的博客
11-15 161
TODO List - 任务表 Angular1 --&gt; Ionic1 --&gt; Vue --&gt; Weex Python --&gt; Django --&gt; Tornado --&gt; Flask --&gt; NodeJS --&gt; Express --&gt; MangoDB --&gt; Nginx --&gt; JS bind, call, apply setI...
Todolist功能开发
weixin_33979363的博客
09-14 346
一、属性绑定和双向数据绑定： 　　　v-bind:title 或简写成 :title实现title属性绑定； 　　　v-model实现双向数据绑定（双向是指：当数据变了，input的value会改变；当input的value变了，数据content也会跟着变） 　　 二、计算属性、侦听器、v-if、v-show、v-for 计算属性：computed指的是：一个属性经过其他属性计...
雷观(十):管理自己的任务列表(TodoList)很重要
weixin_30920853的博客
12-08 188
由幼年，到青年，再到成年，你会发现自己有越来越多的事情要做。参加工作后，很可能要在多个战线上同时忙碌。 最常见的有，工作（可能会加班加点）、爱情（不少人忙着恋爱，需要花费很多心思）、个人娱乐（玩游戏看剧很耗费时间）、社交应酬（同学聚会、同事聚会等）。 如果算上，打扫卫生、做个小项目、和父母打个电话，这种需要去做，但又不用花太多时间的琐事，要做的事情就更多了。 由学生转入职业人士，由...
Vue(八) TodoList功能开发
MW
02-06 212
练习 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>todolist</title> <script src="./vue.js"></script> </head> <body> &...
Angular表单数据模型之双向绑定（MVVM）实现ToDoList功能
01-08
**ToDoList功能实现** 为了实现ToDoList功能，我们需要创建一个表单，包含一个输入框和一个按钮。用户在输入框中键入内容后，点击搜索按钮，应用将会捕获输入框中的数据并进行处理。在Angular中，这通常通过 ...
vue实现留言板todolist功能
08-29
Vue实现留言板To-Do List功能 本资源主要介绍了使用Vue实现留言板To-Do List功能的方法，具有一定的参考价值，对感兴趣的小伙伴们有重要的参考价值。 一、Vue基本用法回顾 通过前两篇文章的学习，我们掌握了Vue的...
Angular之toDoList的实现代码示例
08-28
该实现代码示例提供了一个基本的toDoList组件，包括添加任务、删除任务、编辑任务、完成任务、排序任务、筛选任务等功能。 首先，Angular之toDoList的实现代码示例使用了HTML、CSS和JavaScript三个部分来实现整个...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
vue实现todolist单页面应用
11-29
刚学习vue的小伙伴不知道从哪入手，很多网上的教程一来就搭建脚手架环境，可以新手更本看不懂，建议还是用引入script的方式引入vue.js，然后看官网的教程，再拿那这个demo练练手，也可以看看官网的demo，然后再去熟悉安装，搭建单页面应用。 效果： 功能： 在input输入文字点击按钮或者enter，下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数： data，methods，watch，还有localstorage 页面非常简单： 先写外面的盒子，这里用到v-model双向绑定input的值和js里的inputValue <div id="vue-todolist"
1.用全局状态管理实现todolist表单
www517521498的博客
03-22 289
1、分析一下，todolist的功能，用一个input输入框输入什么，li下的列表就会显示什么，然后，你点击删除可以删除掉所在的信息条 2、初始状态下会有四条初始的信息值 先介绍一下几个基本的组件Box、Input、List 在List里面的先引入一些必要的插件，然后开始写代码我们在Box组件里添加一个store.subscribe的方法，来监听redux的state改变的情况 在Box里...
ToDoList—最简单的待办事项列表
remakez的博客
10-15 1156
ToDoList—最简单的待办事项列表 代码如下：(样式与网上的相同，js代码不同) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sca
点击时获取表格的数据
风华绝代的博客
08-29 1051
var menuId = $(this).children(0).html(); 在哪个上边加的点击事件，都会获取得到的值，children(0)表示第一个，第二个是children(1),依次类推
简单实现一个todoList（上移、下移、置顶、置底）
前端程序员、项目经理、人工智能博主
10-31 1005
深入解析HTML表格行操作：上移、下移、置顶和置底的实现。
Excel操作：制作to do list
热门推荐
fightingoyo的博客
03-22 1万+
Excel操作：制作to do list **案例：**根据以下表格制作to do list，并形成完成比例与未完成比例及图表 操作步骤如下： 选中D4单元格，打开开发者工具，插入“复选框”； 右键单击“复选框”选中，再次单击右键-设置控件格式 在弹出的窗口中，将单元格链接设置为“D4”。 D5-D13的单元格参照如上的步骤，依次类推进行操作。设置后的效果如下所示，在单元格内有FA...
Javascript应用（TodoList表格）
最新发布
m0_74977981的博客
09-07 695
【代码】Javascript应用（TodoList表格）
ToDoList—最简单的待办事项列表（经典案例）重点
weixin_52065872的博客
05-13 4207
案例说明 案例分析 案例实现代码 在这里插入代码片 代码运行结果 插入结果图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值