jQuery Todolist
生活随笔
收集整理的这篇文章主要介绍了
jQuery Todolist
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
结构
<!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();// 数量更新nowNum();// 键盘回车事件$('#txt').on('keydown', function (event) {// 判断是否为回车if (event.keyCode === 13) {// 判断内容是否为空if ($(this).val() == '') {alert('请先输入内容！')} else {// 获得数据var local = getData();// 更改数据 增加local.push({title: $(this).val(), done: false});// 存储数据saveData(local);// 重新渲染load();// 数量更新nowNum();}}});// 删除操作 删除事件$('ul,ol').on('click', 'a', function () {// 读取数据var data = getData();// 拿到自定义索引var index = $(this).attr('index');// 删除当前项数据data.splice(index, 1);// 更新数据saveData(data);// 重新渲染load();// 数量更新nowNum();});// 读取本地存储的数据函数function getData() {// 取得本地数据 字符串形式var data = localStorage.getItem('todo');if (data !== null) {// 传出数组格式的数据 JSON.parse()将字符串转换为数组return JSON.parse(data);} else {return [];}}// 存储数据函数function saveData(data) {// 存储数据 JSON.stringify() 将数组转换为字符串localStorage.setItem('todo', JSON.stringify(data));}// 渲染加载数据函数function load() {// 获取数据var data = getData();// 清空ol 和 ul 的儿子$('ol,ul').empty();// 遍历 数据$.each(data, function (i, n) {// 判断条件 数据中的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>")}})}// 复选框操作$('ul, ol').on('click', 'input', function () {// 获取数据var data = getData();// 通过兄弟 获得索引var index = $(this).siblings('a').attr('index');// 修改对应索引的数据data[index].done = $(this).prop('checked');// 数据更新saveData(data);// 重新渲染load();// 数量更新nowNum();});// 数量更新函数function nowNum() {$('.todo').html($('ul li').length);$('.done').html($('ol li').length);}});
转载于:https://www.cnblogs.com/nigori/p/10816358.html
总结
以上是生活随笔为你收集整理的jQuery Todolist的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 创建一个dynamics CRM wor
- 下一篇： 随堂小测app冲刺（三）