一天完成日历记事本小demo
张*
日历，localstorage，web前端，iconfont
项目描述
通过应用localstorage实现储存数据，并渲染界面
上传时间
2020.07.31
浏览人数
2416人
张*
天津市河东区
Hot:9377
开发项目：web前端
开发环境：HBulider
开发者：汐ゆゆ
项目详情：
1.整体页面展示
这次创作的一个简约风格的日历记事本模块
里面的每一个小格子都是动态生成的
应用了icons图标字体 动态日期生成 浏览器缓存
2.功能介绍
每次打开页面时自动会获取一次当天的日期
来用做运算的数据来初次渲染页面
当天的日期的格子会被浅蓝色高亮显示
之后鼠标每次被点击的格子会被浅蓝色高亮
这时候就可以在下方的输入框输入事项
输入完成后点击保存图标就会提示保存成功
这时候如果选择其他日期 有备忘的日期会变成黄色高亮显示
点击黄色的日期块 会在下方显示之前备忘的事项
同时可以进行编辑 清空 删除事项操作
如果是当天正好有事项 会被变成深蓝色高亮
至此就是实现基础功能的第一版本了
3.模块组件介绍
首先应用了js自带的日期获取
通过传参调用函数 生成了对应日期对应的天数
再生成游离标签插入到对应位置渲染界面
这时会出现问题 星期和日期对应不上
再应用new Date().getDay();方法获取星期几
生成空标签进行填充解决问题
备忘的事项是通过浏览器自带缓存的增删改来实现的
下面介绍浏览器缓存的知识点
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
保存数据：localStorage.setItem(key,value);
也可以用：localStorage.xxx=“xxx”；
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
这次还应用了iconfont图标字体
这是一个很强大的功能 方便后期的更改渲染操作
只需要引入官方提供的css文件
再在需要使用图标的地方添加类名就可以
后续只需要在css文件里更改样式即可
4.总结
通过这次的小demo创作
加深了js获取日期 游离标签的操作 localStorage 还有iconfont图标字体等知识点应用
现在的小demo还有不少bug需要修复 需要完善的地方还有很多 希望大家多多指教
项目链接 https://www.ruruband.xyz/html/note/index.html
项目二维码
欢迎访问 感谢阅读！
张*
