jQuery Todolist
生活随笔
收集整理的這篇文章主要介紹了
jQuery Todolist
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
結(jié)構(gòu)
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><title>Todolist</title><link rel="stylesheet" href="css/todolist.css"><script src="js/jquery.min.js"></script><script src="js/todolist.js"></script> </head> <body> <div class="header"><div><h2>ToDoList</h2><input type="text" name="txt" id="txt" placeholder="添加TODo"></div> </div> <div class="container"><p>待完成<span class="todo">1</span></p><ul></ul><p>已完成<span class="done">2</span></p><ol></ol> </div> <div class="footer"> Copyright © 2014 todolist.cn</div> </body> </html>樣式
* {margin: 0;padding: 0; }body {background-color: rgba(0, 0, 0, .2); }.header {width: 100%;height: 50px;background-color: rgba(47, 47, 47, .98); }.header div {width: 500px;height: 50px;margin: 0 auto;padding: 0 5px; }h2 {float: left;color: white;line-height: 50px; }.header input {margin-top: 13px;border: 0;border-radius: 8px;width: 300px;height: 24px;padding: 0 10px;outline: none;float: right; }.container {width: 500px;margin: 50px auto; }p {font-size: 20px;font-weight: bold; }span {float: right;width: 20px;height: 20px;margin-top: 4px;background-color: orange;border-radius: 50%;font-size: 14px;text-align: center;line-height: 20px; }.footer {width: 100%;text-align: center;font-size: 12px;color: #ccc; }ul {margin-bottom: 20px; }li {list-style: none;width: 500px;height: 24px;border-radius: 4px;padding: 0 5px;box-sizing: border-box;margin: 10px 0; }ul li {background-color: green; }ol li {background-color: purple; }li input {float: left;border: 0;width: 24px;height: 24px; }li p {float: left;line-height: 24px;font-size: 14px; }li a {float: right;margin-top: 6px;width: 12px;height: 12px;background-color: #999;border-radius: 50%; }js
$(function () {// 渲染load();// 數(shù)量更新nowNum();// 鍵盤回車事件$('#txt').on('keydown', function (event) {// 判斷是否為回車if (event.keyCode === 13) {// 判斷內(nèi)容是否為空if ($(this).val() == '') {alert('請先輸入內(nèi)容！')} else {// 獲得數(shù)據(jù)var local = getData();// 更改數(shù)據(jù) 增加local.push({title: $(this).val(), done: false});// 存儲數(shù)據(jù)saveData(local);// 重新渲染load();// 數(shù)量更新nowNum();}}});// 刪除操作 刪除事件$('ul,ol').on('click', 'a', function () {// 讀取數(shù)據(jù)var data = getData();// 拿到自定義索引var index = $(this).attr('index');// 刪除當(dāng)前項(xiàng)數(shù)據(jù)data.splice(index, 1);// 更新數(shù)據(jù)saveData(data);// 重新渲染load();// 數(shù)量更新nowNum();});// 讀取本地存儲的數(shù)據(jù)函數(shù)function getData() {// 取得本地?cái)?shù)據(jù) 字符串形式var data = localStorage.getItem('todo');if (data !== null) {// 傳出數(shù)組格式的數(shù)據(jù) JSON.parse()將字符串轉(zhuǎn)換為數(shù)組return JSON.parse(data);} else {return [];}}// 存儲數(shù)據(jù)函數(shù)function saveData(data) {// 存儲數(shù)據(jù) JSON.stringify() 將數(shù)組轉(zhuǎn)換為字符串localStorage.setItem('todo', JSON.stringify(data));}// 渲染加載數(shù)據(jù)函數(shù)function load() {// 獲取數(shù)據(jù)var data = getData();// 清空ol 和 ul 的兒子$('ol,ul').empty();// 遍歷 數(shù)據(jù)$.each(data, function (i, n) {// 判斷條件 數(shù)據(jù)中的done 屬性的值 為trueif (n.done) {// 將生成的li 添加到 ol中(已完成)$('ol').append("<li><input type='checkbox' checked ><p>" + n.title + "</p><a href='javascript:;'" +" index= " + i + "></a></li>")// 否則 添加到 ul 中(未完成)} else {$('ul').append("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;'" +" index= " + i + "></a></li>")}})}// 復(fù)選框操作$('ul, ol').on('click', 'input', function () {// 獲取數(shù)據(jù)var data = getData();// 通過兄弟 獲得索引var index = $(this).siblings('a').attr('index');// 修改對應(yīng)索引的數(shù)據(jù)data[index].done = $(this).prop('checked');// 數(shù)據(jù)更新saveData(data);// 重新渲染load();// 數(shù)量更新nowNum();});// 數(shù)量更新函數(shù)function nowNum() {$('.todo').html($('ul li').length);$('.done').html($('ol li').length);}});?
轉(zhuǎn)載于:https://www.cnblogs.com/nigori/p/10816358.html
總結(jié)
以上是生活随笔為你收集整理的jQuery Todolist的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创建一个dynamics CRM wor
- 下一篇： 随堂小测app冲刺（三）