使用jQuery制作todolist_j jquery 做to do list

作者：盐析白兔 | 2024-02-23 08:27:41

踩

j jquery 做to do list

使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

书写的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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

书写的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);
    }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

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

总结

实现todolist主要有四大核心

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

注意

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/135045?site