To Do List (待办事项)
生活随笔
收集整理的這篇文章主要介紹了
To Do List (待办事项)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
To Do List (待辦事項)
上篇博客中我們講到了瀏覽器的本地存儲,因為沒有列出具體的實例讓大家操作,所以肯定還有一部分人是沒有徹底明白的,那么今天這篇博客,就通過一個案例來讓大家好好了解一下什么是本地存儲以及本地存儲的作用!
閑話少說,直接上干貨!
To Do List (待辦事項)案例
名稱:
- To Do List (待辦事項)
需求:
具體操作:
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>待辦事項</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">待辦事項</label><input type="text" id="title" placeholder="添加待辦事項!" /></form></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>待辦事項 © 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 () {// 刷新一次頁面并且讀取數據load();// 添加鍵盤事件$("#title").on("keydown", function (event) {if (event.keyCode === 13) {// 先讀取本地存儲原來的數據var local = getDate();// 把local數組進行更新數據 把最新的數據追加給local數組local.push({ title: $(this).val() });// 把這個數組local 存儲給本地存儲saveDate(local);// 2. toDoList 本地存儲數據渲染加載到頁面load();$(this).val("");}});// toDoList 刪除操作$("ol, ul").on("click", "a", function () {// 先獲取本地存儲var data = getDate();// 修改數據var index = $(this).attr("id");data.splice(index, 1);// 保存到本地存儲saveDate(data);// 重新渲染頁面load();});// toDoList 正在進行和已完成選項操作$("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 getDate() {//讀取已儲存的json數據var data = localStorage.getItem("todolist");if (data !== null) {// 本地存儲里面的數據是字符串格式的 但是我們需要的是對象格式的return JSON.parse(data);} else {return [];}}// 保存本地存儲數據function saveDate(data) {//已json形式存儲localStorage.setItem("todolist", JSON.stringify(data));}// 渲染加載數據function load() {// 讀取本地存儲的數據var data = getDate();// 遍歷之前先要清空ol里面的元素內容$("ol, ul").empty();var todoCount = 0; // 正在進行的個數var doneCount = 0; // 已經完成的個數// 遍歷這個數據$.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 (待辦事項)的全部內容,相信大家通過這一個案例.對瀏覽器的本地存儲有了更加深入的了解,那么今天的內容就到這里了,大家有什么不懂的地方,可以私信問我,我會盡力為大家進行講解!
總結
以上是生活随笔為你收集整理的To Do List (待办事项)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图片加水印app这么多，你更喜欢哪一个？
- 下一篇： 职称计算机考试word2003真题,全国