1分钟快速制作漂亮的Html5本地记事本
2024-08-31 17:10:56
大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾《五步教你制作漂亮精致的HTML时钟》,还有《一分钟教你如何实现唯美的文字描边》;今天给大家分享一个用H5 + localStorage开发的一个本地记事本应用,下面先看一下他精美的帅样子吧。
主要实现的功能有:
填写标题验证功能,标题不能为空
可以选择分类:默认/生活/美食/代码
添加成功后,立即显示
可以搜索标题和分类
笔记可以点击标题展开折叠
多条数据第一条展开显示,其余折叠显示
1.初始化数据
var init = {title:'这是标题',
date:new Date().toLocaleString(),
type:'示例',
cont:'这是一个笔记应用,不需要联网,也不需要数据库,可以直接把数据储存在本地.方便易用!^_^'};
当用户第一次打开应用时,给用户的提示信息。
2.封装显示数据的方法
function show(notes){
var temp = $('#temp').html();
var tempStr= '';
//如果不是数组,变成数组
if(!Array.isArray(notes)){
notes = [notes];
}
for(var i=notes.length-1;i>-1;i--){
var note = notes[i];
tempStr += temp.replace('@title',note.title)
.replace('@date',note.date)
.replace('@type',note.type)
.replace('@cont',note.cont);
}
$('#noteList').html(tempStr);
}
外部传入要显示的数据,内部进行数据的拼接和渲染。
3.从本地存储中读取离线数据
//读取所有数据
function showList(){
var notes = localStorage.getItem('notes');
if(!notes){
show(init);
}else{
notes = JSON.parse(notes);
show(notes);
}
//第一个展开
$('#noteList .item:first').find('.title').trigger('click');
}
4、查询数据
$('#search').click(function(){
var title = $('#title1').val();
var type = $('#type1').val();
var notes = localStorage.getItem('notes');
if(!notes){
alert('没有本地笔记数据!');
return;
}else{
notes = JSON.parse(notes);
}
var note = [];
for(var i=0;i<notes.length;i++){
//notes[i] json对象
var flag = false;
if(!title){
flag = notes[i].type==type;
}else if(!type){
flag = notes[i].title.indexOf(title)>-1;
}else{
flag = notes[i].title.indexOf(title)>-1 && notes[i].type==type;
}
if(flag){
note.push(notes[i]);
}
}
if(note.length == 0){
alert('抱歉~没有对应的笔记!');
}else{
show(note);
}
});
5、使用事件委托来定义折叠展开操作
$('body').on('click','#noteList .title', function(){
$(this).next().slideToggle();
});
6、初始化显示数据
showList();
好了,一个精美的HTML5本地记事本就诞生了,会做了吗?欢迎关注上海尚学堂html5相关技术文章。
本文为上海尚学堂前端原创,转载请注明原文出处。
最新文章
- CPU的内部架构和工作原理 (转,相当不错)
- static_cast、dynamic_cast、reinterpret_cast、const_cast以及C强制类型转换的区别
- [BZOJ2796][Poi2012]Fibonacci Representation
- QTextCodec::makeDecoder函数,plugins需要是动态链接库
- Iframe 自适应高度的方法!
- listview加载性能优化
- 如何让虚拟目录里面的webconfig不继承网站的设置
- [Hibernate] List 映射例子
- iOS9 中的一些适配问题
- Apache Cloudstack Development 101 -- Data Access Layer
- Oracle EBS-SQL (AR-1):检查应收收款发生额
- MongDb添加嵌套文档
- 使用JDBC进行数据库的事务操作(2)
- 客户端javascript
- 解决MyEclipse吃内存以及卡死的方法 (转)
- windows 8 安装 oracle 11g 报错:command line option syntax error,type command/? for help
- MVC架构下,使用NPOI读取.DOCX文档中表格的内容
- Akka(40): Http:Marshalling reviewed - 传输数据序列化重温
- Using QueryRunner to insert ArrayList<;Object[]>;
- mysql函数之SUBSTRING_INDEX(str,";/";,-1)
热门文章
- StoneTab标签页CAD插件 3.1.0
- 安装HAXM报错:failed to configure driver unknown error. failed to open driver 并提示数字签证不可用
- Boost,Eigen,Flann—C++标准库预备役
- VUE实现简单的全选/全不选
- CSS 实现居中 + 清除浮动
- ARM与x86 CPU架构对比
- 【SpringBoot】整合日志框架
- (二十四)Ubuntu16.04配置ADB调试环境
- Linux环境下交叉编译器安装及运行
- (转)android(SignalA)接收.net(SignalR)推送过来的消息