todolist本地存储实现版(html+css+JQuery)

yingjiayu12

已于 2022-07-14 21:08:02 修改

阅读量337

点赞数

分类专栏： html,css,js原生小案例文章标签： css html jquery

于 2022-07-12 21:09:42 首次发布

本文链接：https://blog.csdn.net/yingjiayu12/article/details/125751350

版权

html,css,js原生小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

todolist本地存储实现版(html+css+JQuery)

emmm,这个demo应该是我学习完jQuery之后的一个小总结吧,具体实现了:

todolist这个添加任务的功能
todolist这个标记任务完成的功能
本地储存的功能(没钱租服务器(bushi[毕竟只是个小demo,平时自己用用应该没问题,前提是浏览器的记录不清楚…]

题外话:可能有些人觉得都2022年了,怎么还有人在玩 ~~传统框架~~ ,本人认为既然是一个框架嘛,对于一个初学者来学学也没什么大问题

话不多说下面是本demo的html部分

[中间不好在代码中解释以及需要另外解释的地方将以 @[numer] 来标记]

<!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>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<!--话说各位应该都知道下面这个use strict是干什么的吧-->
<script>"use strict"</script>
<style>
	<!--经典去除margin和padding,便于定位布局-->
	<!--body 的有些样式是可以继承的,因此为了方便,直接先写了样式-->
    body {
        margin: 0;
        padding: 0;
        font-size: 16px;
        background: #cdcdcd;
    }
</style>
</head>
<body>
    <header>
        <section>
            <!-- required是让该元素在提交时必须有内容 -->
            <!-- autocomplete是让浏览器不自动记录表单值 -->
            <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是用来记录未完成的计划的,里面的内容是用jQuery以后动态生成的-->
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="doneCount"></span></h2>
        <!--同理,这里是用来记录已经完成并标记的的内容,当然里面也包含一个判断框和一个超链接-->
        <ul id="donelist">

        </ul>
    </section>
    <!--footer部分-->
    <footer>
        Copyright &copy; 2014 todolist.cn used by 2022 YJY
    </footer>
<noscript>sorry,你的浏览器不支持javascipt语言</noscript>
</body>
</html>

emmm,下面是繁琐的css环节

header {
    height: 50px;
    background: #333;
}
/*这里好像并没有设置宽度呢??,为什么呢,主要是后面用了一点点的响应式布局*/
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;
    /*这里使input设置了内外两个阴影,为什么要这么做呢,问就是为了更加美观*/
    box-shadow: 0 1px 0 rgba(255,255,255,.24),0 1px 6px rgba(0,0,0,.45) inset;
    border: none;
    /*日常取消input的选定样式*/
    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 {
    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;
     /*注意这里用了一个小技巧,使链接的背景和边框的颜色不同并且边框用了
     double属,众所周知doule定义了双边框功能,使a链接跟美观了*/
    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;
}
/*响应式布局功能*/
/* 注：max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。 */
@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}
/* 下面为浏览器宽度>620px时实行 */
@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

下面是最最重要的js部分

(今天码字累了,解释明天再上(bushi),先贴代码,勤奋的我已经上注释了╮（￣﹏￣）╭

/*前提知识,下面主要是用Jquery来实现(如果没学过可能看起来有点累,但是不代表看不懂,大佬肯定
能触类旁通)*/
$(function () {
	/*load()是一个重新加载页面的函数,因为这个是通过本地储存的,所以每次更改都是更改本地的数据,
	所以每次更新完之后都要重新加载,当然也可以搭配AJAX来使用是吧,但是我没有租服务器,又不想去搞那些
	乱七八糟的公用服务器*/
	/*当然在这里的作用就是在页面开始加载时渲染页面*/
    load();
    //下面是输入是保存数据
    $('#title').on('keydown', function (event) {
    	//判断是不是按了回车键并且内容是不为空的
        if (event.keyCode === 13 && $(this).val() !== '') {
        //getDate()是获取本地数据的一个函数,在下面
            var local = getDate();
            //push是数组里添加元素的方法,title是文字内容,done是用来储存是不是完成的
            //可能有人会想输入的肯定是未完成的,为什么要加呢
            //想一想万一以后使其变成了完成的该怎么办呢,肯定要来一个参数来判断啊
            local.push({
                title: $(this).val(),
                done: false
            });
            //对应上文,是一个储存数据的自定义函数
            saveDate(local);
            load();
            //清空文本框的内容
            $(this).val('');
        }
    });
    //emm,本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
    //如果不行可以不套这个函数试试,会发现输出的只有object,并没有具体的内容
    //获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
    function saveDate(local) {
        localStorage.setItem('todolist', JSON.stringify(local));
    }
    function getDate() {
       	var data = localStorage.getItem('todolist');
        if (data !== null) {
            return JSON.parse(data);
        }
        else {
            return [];
        }
    }
    //这里是为了绑定a元素的一个编号,为了以后能够点击判断是哪个元素,然后执行删除操作
    //这里用父元素委托事件是因为a是动态生成的,因此用这个方法能完成绑定操作,注意不能直接给a绑定
    $('ol,ul').on('click', 'a', function () {
        var data = getDate();
        var _index = $(this).attr('id');
        data.splice(_index, 1);
        saveDate(data);
        load();
    })
    //点击时标记此条文字是已完成
    $('ol,ul').on('click', 'input', function () {
        var data = getDate();
        var _index = $(this).siblings('a').attr('id');
        data[_index].done = $(this).prop('checked');
        saveDate(data);
        load();
    })
    //下面是加载函数
    function load() {
    //获取现在是本地数据
        var data = getDate();
        // console.log(data);
       	//清空原来已完成和未完成的所有内容
       	//下面重新渲染
        $('ol').empty();
        $('ul').empty();
        //记录已完成和未完成两者的个数
        var todoCount=0,doneCount=0;
        $.each(data, function (i, n) {
            if (data[i].done === true) {
                doneCount++;
                //这里用了朴素的添加li的方式,当然这里可以使用模板字符来实现,有兴趣的可以试试
                $('ul').prepend('<li><input type="checkbox" checked="checked"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '></a></li>');
            }
            else {
                todoCount++;
                $('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '></a></li>');
            }
            // console.log(n);
        })
        //渲染数量
        $('#todoCount').text(todoCount);
        $('#doneCount').text(doneCount);
    }
})