To Do List (待办事项)
生活随笔
收集整理的這篇文章主要介紹了
To Do List (待办事项)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
To Do List (待辦事項(xiàng))
上篇博客中我們講到了瀏覽器的本地存儲(chǔ),因?yàn)闆]有列出具體的實(shí)例讓大家操作,所以肯定還有一部分人是沒有徹底明白的,那么今天這篇博客,就通過一個(gè)案例來讓大家好好了解一下什么是本地存儲(chǔ)以及本地存儲(chǔ)的作用!
閑話少說,直接上干貨!
To Do List (待辦事項(xiàng))案例
名稱:
- To Do List (待辦事項(xiàng))
需求:
具體操作:
index.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>待辦事項(xiàng)</title><link rel="stylesheet" href="./cs.css"><link rel="stylesheet" href="./css.css"><script src="./jquery-3.5.1.min.js"></script><script src="./js.js"></script></head><body><header><section><form id="form"><label for="title">待辦事項(xiàng)</label><input type="text" id="title" placeholder="添加待辦事項(xiàng)!" /></form></section></header><section><h2>正在進(jìn)行 <span id="todocount"></span></h2><ol id="todolist" class="demo-box"></ol><h2>已經(jīng)完成<span id="donecount"></span></h2><ul id="donelist"></ul></section><footer>待辦事項(xiàng) © 2020 別.cn BIE</footer> </body></html>cs.css
html {font-size: 16px;}@media screen and (max-width: 750px) {html {font-size: 16px;}}@media screen and (max-width: 540px) {html {font-size: 10px;}}@media screen and (max-width: 360px) {html {font-size: 5px;}}css.css
* {padding: 0px;margin: 0px;box-sizing: border-box;} body {background: #CDCDCD;} header {height: 3.125rem;background: #333;background: rgba(47,47,47,0.98); } label {float: left;width: 6.25rem;line-height: 3.125rem;color: #DDD;font-size: 1.5rem;margin-left: 30%; } header input {float: right;width: 20%;height: 1.5rem;margin-top: .75rem;text-indent: .625rem;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;margin-right: 30%; } h2 {margin-left: 30%;display: block;font-size: 1.5rem;margin-top: 0.83rem;margin-bottom: 0.83rem;font-weight: bold; } footer {margin-top: 0.83rem;font-size: 1rem;width: 30%;margin-left: 40%; } h2 {position: relative; } span {position: absolute;top: .125rem;right: 43%;display: inline-block;padding: 0 .3125rem;height: 1.25rem;border-radius: 1.25rem;background: #E6E6FA;line-height: 1.375rem;text-align: center;color: #666;font-size: .875rem; } ol,ul {list-style: none; } li {margin-left: 30%;width: 40%;height: 2rem;line-height: 2rem;background-color: #fff;position: relative;margin-bottom: .625rem;padding: 0px 2.8125rem;border-radius: .1875rem;box-shadow: 0 .0625rem .125rem rgba(0,0,0,0.7); } li input {position: absolute;top: .125rem;left: .625rem;width: 1.375rem;height: 1.375rem; } li a {position: absolute;top: .125rem;right: .3125rem;display: inline-block;width: 1.8rem;height: 1.8rem;border-radius: 9rem;border: .375rem solid #fff;background-color: #ccc;line-height: .875rem;text-align: center;color: lightgray;font-weight: 25px;font-size: .875rem; }js.js
$(function () {// 刷新一次頁面并且讀取數(shù)據(jù)load();// 添加鍵盤事件$("#title").on("keydown", function (event) {if (event.keyCode === 13) {// 先讀取本地存儲(chǔ)原來的數(shù)據(jù)var local = getDate();// 把local數(shù)組進(jìn)行更新數(shù)據(jù) 把最新的數(shù)據(jù)追加給local數(shù)組local.push({ title: $(this).val() });// 把這個(gè)數(shù)組local 存儲(chǔ)給本地存儲(chǔ)saveDate(local);// 2. toDoList 本地存儲(chǔ)數(shù)據(jù)渲染加載到頁面load();$(this).val("");}});// toDoList 刪除操作$("ol, ul").on("click", "a", function () {// 先獲取本地存儲(chǔ)var data = getDate();// 修改數(shù)據(jù)var index = $(this).attr("id");data.splice(index, 1);// 保存到本地存儲(chǔ)saveDate(data);// 重新渲染頁面load();});// toDoList 正在進(jìn)行和已完成選項(xiàng)操作$("ol, ul").on("click", "input", function () {// 先獲取本地存儲(chǔ)的數(shù)據(jù)var data = getDate();// 修改數(shù)據(jù)var index = $(this).siblings("a").attr("id");data[index].done = $(this).prop("checked");// 保存到本地存儲(chǔ)saveDate(data);// 重新渲染頁面load();});// 讀取本地存儲(chǔ)的數(shù)據(jù)function getDate() {//讀取已儲(chǔ)存的json數(shù)據(jù)var data = localStorage.getItem("todolist");if (data !== null) {// 本地存儲(chǔ)里面的數(shù)據(jù)是字符串格式的 但是我們需要的是對(duì)象格式的return JSON.parse(data);} else {return [];}}// 保存本地存儲(chǔ)數(shù)據(jù)function saveDate(data) {//已json形式存儲(chǔ)localStorage.setItem("todolist", JSON.stringify(data));}// 渲染加載數(shù)據(jù)function load() {// 讀取本地存儲(chǔ)的數(shù)據(jù)var data = getDate();// 遍歷之前先要清空ol里面的元素內(nèi)容$("ol, ul").empty();var todoCount = 0; // 正在進(jìn)行的個(gè)數(shù)var doneCount = 0; // 已經(jīng)完成的個(gè)數(shù)// 遍歷這個(gè)數(shù)據(jù)$.each(data, function (i, n) {if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");todoCount++;}});$("#todocount").text(todoCount);$("#donecount").text(doneCount);}})以上就是我們To Do List (待辦事項(xiàng))的全部?jī)?nèi)容,相信大家通過這一個(gè)案例.對(duì)瀏覽器的本地存儲(chǔ)有了更加深入的了解,那么今天的內(nèi)容就到這里了,大家有什么不懂的地方,可以私信問我,我會(huì)盡力為大家進(jìn)行講解!
總結(jié)
以上是生活随笔為你收集整理的To Do List (待办事项)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图片加水印app这么多，你更喜欢哪一个？
- 下一篇： 职称计算机考试word2003真题,全国