使用jQuery制作todolist

最新推荐文章于 2022-11-26 16:12:43 发布

AmyGeng123

最新推荐文章于 2022-11-26 16:12:43 发布

阅读量530

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/AmyGeng123/article/details/108941740

版权

使用jQuery制作todolist

HTML部分：

<!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-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>
<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>
</html>

书写的css部分:

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #CDCDCD;
}

header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}

section {
    margin: 0 auto;
}

label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #DDD;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none
}

input:focus {
    outline-width: 0
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}

footer a {
    color: #666;
    text-decoration: none;
    color: #999;
}

@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

书写的js部分:

$(function () {
    // 设置输入框鼠标弹起事件
    $('#title').on('keyup', function (e) {
        if (e.keyCode === 13) {
            if ($(this).val().trim() == '') return $(this).val('');
            var data = getData();
            data.push({ title: $(this).val().trim(), done: false });
            setData(data);
            load(data);
            $(this).val('')
        }
    })
    // 点击删除按钮删除当前内容
    $('#todolist,#donelist').on('click', 'a', function () {
        var data = getData();
        var index = $(this).attr('id');
        data.splice(index, 1);
        setData(data);
        load(data);
    })
    //点击复选框,改变内容的渲染位置
    $('#todolist,#donelist').on('click', 'li #checkbox', function (e) {
        var data = getData();
        var index = parseInt($(this).siblings('a').attr('id'));
        // console.log(index);
        // console.log(data[index]);
        data[index].done = $(this).prop('checked');
        setData(data);
        load(data);
    })
    //双击复选框,可以修改复选框中的数据
    $('#todolist,#donelist').on('dblclick', 'li p', function (e) {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.e;//阻止双击选中文本
        var index = parseInt($(this).siblings('a').attr('id'));
        //将当前元素中的内容保存在变量str中
        var str = $(this).html()
        //点击时在当前元素中添加一个input标签
        $(this).html('<input type="text">');
        //获取添加的元素
        var input = $(this).children("input")[0];
        //将元素中原来的内容赋值给新增的input标签
        input.value = str;
        //设置标签中的内容默认为选中状态
        input.select();
        //设置新增的标签失去焦点事件 失去焦点需要重新渲染页面
        input.onblur = function () {
            // 获取本地存储
            var data = getData();
            // 修改数据
            data[index].title = this.value;
            //重新存储到本地
            setData(data);
            //页面渲染
            load(data);
        }
        input.onkeyup = function (e) {
            if (e.keyCode == 13) {
                this.blur()
            }
        }
    })
    //获取本地存储中的数据
    function getData() {
        var data = localStorage.getItem('item');
        if (data) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //将新的数据保存到本地存储中
    function setData(data) {
        localStorage.setItem('item', JSON.stringify(data))
    }
    load(getData())//页面加载时就需要调用本地存储中的数据来渲染页面
    //渲染页面
    function load(array) {
        var todoCount = 0;
        var doneCount = 0;
        $('#todolist,#donelist').html('')
        array.forEach(function (value, index) {
            if (value.done) {
                doneCount++;
                var li = `<li><input type='checkbox' checked='checked' id='checkbox'><p>${value.title}</p> <a href='javascript:;' id=" ${index}"></a></li>`;
                $('#donelist').prepend(li)
            } else {
                todoCount++;
                var li = `<li><input type='checkbox' id='checkbox'><p>${value.title}</p> <a href='javascript:;' id=" ${index}"></a></li>`;
                $('#todolist').prepend(li)
            }
        })
        $('#todocount').html(todoCount);
        $('#donecount').html(doneCount);
    }

})

此外还需要引入jQuery中的js文件

总结

实现todolist主要有四大核心

获取本地存储
修改数据
创建本地存储
渲染页面

注意

本地存储里面只能存储字符串的数据格式存储时如果是对象或数组,需要使用 JSON.stringify() 转换为字符串格式
获取本地存储的数据需要把里面的字符串数据使用 JSON.parse() 转换为对象或数组格式

AmyGeng123

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
使用jQuery制作todolist

使用jQuery制作todolistHTML部分：<!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-scale=1.0, user-
复制链接

扫一扫