todolist基本功能
不同todolist版本演示
3月20日
1. input输入框回车确定添加内容
- 添加键盘监听事件
- 读取本地存储内容
- 将新的内容添加到本地存储并保存
- 渲染内容
$(function () {
renderDate()
// 1.为TODOlist输入框，添加按下事件，添加todo内容
$("#title").on("keydown", function (event) {
//回车键
if (event.keyCode === 13) {
let value = $(this).val()
if ($.trim(value) === "") {
alert("请输入内容！")
} else {
// 读取本地文件---》刷新后显示
let localFile = getDate();
//更新本地文件到本地
localFile.push({ title: $(this).val(), done: false })
// 存储本地文件
saveFile(localFile)
renderDate()
// $(this).prop("value") =' '
// location.reload ()
$(this).val('')//回车后清空input框中的内容
}
}
});
2. 更改待办状态
- 为创建的input标签添加点击事件
- 如何确定指定的点击对象？
- 通过本地存储为a标签添加的索引，找到相应的input标签
- 点击input标签，更改本地存储对应的属性并保存，通过属性作为渲染的依据
3. 删除待办
- 完成和未完成都需要删除按钮
- 删除是删除本地存储对应的内容
- 如何删除指定的内容?
- 通过渲染添加标签时，为a标签添加的id,可以找到对应的本地存储对象，并删除
- 为删除按钮添加点击事件
- 获取按钮a的索引标记
- 获取本地存储对象数组，通过索引删除指定对象
// 删除
/* 思路分析：
1. 点击那a(删除按键)就会删除对应的todolist对象数组中的对象，然后渲染
2. 关键：如何将a和数组对象进行关联，由于a是在遍历对象数组时添加的，同时数组对象索引是可以使用的
所有可以通过，为a元素添id，并且与数组索引关联，获取a的id,就可以得到数组的索引，通过id删除数组索引，
让后保存到本地，最后渲染
*/
$("ol,ul").on('click', 'a', function () {
// 得到本地数据
let date = getDate()
// 获取数据与a对于的id,删除数据
let index = $(this).attr('id')
date.splice(index, 1)
// 保存数据到本地
saveFile(date)
// 渲染
renderDate()
})
4. 修改待办
- 获取要修改的对象的索引
- 根据索引找到数组对象，并修改内容
- 保存到本地
- 渲染
// 修改数据
$("ol,ul").on('click', '.update', function () {
while (true) {
let contentNew = prompt('请输入要修改的内容,放弃修改请输入1')
if($.trim(contentNew) === '1'){
return true
}
if ($.trim(contentNew) === ''){
alert('内容不能为空或空格')
// return false
}else{
// 得到本地数据
let date = getDate()
// 获取数据与a对于的id,删除数据
let index =$(this).siblings('a').attr('id')
date[index].title = contentNew;
saveFile(date)
// 渲染
renderDate()
return false
}
}
})
5. 查找待办
// 查找数据
function keywordSubmit() {
//获取输入框中的关键字
// 在jquery中，trim()方法用于去除字符串两端的空白字符，语法为“$.trim(str)”；
// trim()方法会移除字符串开始和末尾处的所有换行符、空格（包括连续的空格）和制表符。
// 排查空格对关键字符查找的影响
const keyword = $.trim($("#title").val());
//匹配查找
$('.p_li').each(function () {//遍历获取标签对象内容——————此处不需要通过本地存储来获取，简单方便
const text = $(this).text();
if (keyword) {
if (new RegExp(keyword.toLowerCase()).test(text.toLowerCase())) {
$(this).parent(). show();
} else {
//直接调用显示影藏方法
$(this).parent(). hide();
}
} else {
$(this).parent().show();
}
});
}
6. 简单定时器
- 与删除逻辑基本相似——写法
- 点击添加不同的定时器
- 但是无法时间定时器的本地存储——页面刷新后消失
7. 待办个数统计
- 渲染时，在ol ul分别添加自增计数
- 添加到设定好的标签当中
8 点击随机名言显示
- 将名言和作者存储在数组对象当中
- 使用随机函数获取随机序号
- 通过获取过的随机序号得到数组对象元素属性
- 添加属性到网页标签当中
// 随机名言展示
const saying = document.querySelector('.saying')
const writer = document.querySelector('.writer')
let wisdoms = [
{
saying: '弱小和无知并不是生存最大的障碍，傲慢才是',
writer: '刘慈欣'
},
{
saying: '人生而自由，但无往不在枷锁之中',
writer: '卢梭'
},
{
saying: '如果我比笛卡尔看得远些，那是因为我站在巨人们的肩上的缘故',
writer: '牛顿'
},
{
saying: '世间本无路，走的人多了，也就成了路。',
writer: '鲁迅'
},
{
saying: '人最苦的是梦醒了却无路可走',
writer: '鲁迅'
},
{
saying: '大道至简，实干为先',
writer: '匿名'
},
{
saying: '生活本就沉闷但跑起来就有风',
writer: '匿名'
}
]
//1.随机函数--》获取序号
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
saying.addEventListener('click', function () {
let index = getRandom(0, 8)
saying.innerHTML = `「 ${wisdoms[index].saying} 」`
writer.innerHTML = `--- ${wisdoms[index].writer}`
})
9. 动态显示时间
- 页面加载便显示时间
<body onload="startTime()"> - 使用定时器每秒调用一次函数
// 动态显示时间
function startTime() {
var today = new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth() + 1;//通过日期对象的getMonth()方法返回年
var dd = today.getDate();//通过日期对象的getDate()方法返回年
var hh = today.getHours();//通过日期对象的getHours方法返回小时
var mm = today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss = today.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
MM = checkTime(MM);
dd = checkTime(dd);
mm = checkTime(mm);
ss = checkTime(ss);
var day; //用于保存星期（getDay()方法得到星期编号）
if (today.getDay() == 0) day = "星期日 "
if (today.getDay() == 1) day = "星期一 "
if (today.getDay() == 2) day = "星期二 "
if (today.getDay() == 3) day = "星期三 "
if (today.getDay() == 4) day = "星期四 "
if (today.getDay() == 5) day = "星期五 "
if (today.getDay() == 6) day = "星期六 "
document.querySelector('.time').innerHTML = hh + ":" + mm + ":" + ss + " ";
document.querySelector('.date').innerHTML = yyyy + "年" + MM + "月" + dd + "日" +" "+day
setTimeout('startTime()', 1000);//每一秒中重新加载startTime()方法
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
10. 其他内容
- 点击上下箭头隐藏列表
- 点击事件隐藏内容主体
11. 主要方法
- 本地存储内容获取方法
getDate()
function getDate() {
//用数组接受数据内容
let date = localStorage.getItem('todolist')
if (date !== null) {
return JSON.parse(date)//一定是复杂数据类型,并且转换为对象
} else {
return []
}
}
- 本地存储数据内容保存方法
saveFile()
// 保存文件
function saveFile(date) {
localStorage.setItem("todolist", JSON.stringify(date))//存储的是字符串对象，获取的是对象
}
- 本地存储内容渲染到页面方法
renderDate()
// 渲染数据
/*
1. 获取本地存档的对象数组
2. 遍历数组，获取数组title属性
3. 将title属性的值，赋值给输入框
*/
function renderDate() {
let date = getDate()
// 计数
let doneCount = 0
let todoCount = 0
//console.log(date);
// 遍历对象数组
// 遍历前先清空li防止重复
$("ol,ul").empty()
$.each(date, function (i, n) {
/* i表示对象数组的索引从0 开始，n表示单个对象 */
// 根据属性checked的不同添加到不同的标签当中
if (date[i].done) {//点击过
$("ul").prepend(`<li><input type = 'checkbox' checked = 'true'><p>${n.title}
</p><a href ='javascript:;' id =${i}></a></li>`)
doneCount++
} else {
$("ol").prepend(`<li><input type = 'checkbox'><p>${n.title} </p><dl>
<dt >推迟</dt>
<dd class = one>1分钟</dd>
<dd class = five>5分钟</dd>
<dd class = twenty-five>25分钟</dd>
<dd class = thirty>30分钟</dd>
</dl><a href ='javascript:;' id =${i}></a></li>`)
todoCount++
}
})
// 计数
/* 每次渲染每次更新计数 */
$("#todocount").text(todoCount)
$("#donecount").text(doneCount)
}
12. 本地存储的数据格式
键：todolist
值：{ title: xxx, done: false }
- 依照对象的形式存储,因此存储的是复杂数据类型
- 在本地存储的是对象字符串——localStorage.setItem(“todolist”,JSON.stringify(data))
JSON.stringify() - 获取时存储到本地对象数组的是对象——localStorage.getItem(“todolist”,JSON.parse(data))
JSON.parse() - 本地存储中一个键，可以存储多个内容
扫一扫
2196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
