html在线记事本,5分钟教你制作漂亮的Html5本地记事本
今天给大家分享一个用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[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本地记事本就诞生了,会做了吗?本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML5/CSS3频道,获取更多WEB前端知识!
html在线记事本,5分钟教你制作漂亮的Html5本地记事本相关推荐
- 用计算机制作贺卡,简单几步教你制作漂亮的母亲节贺卡 母亲节贺卡制作方法 (全文)...
明天就是5.13母亲节了,很多人都会在这天给妈妈送礼物.据调查,对于年轻的妈妈们来说,鲜花.包包.大餐等礼物并没有吸引力,而最受欢迎则是小朋友们亲身做的贺卡,毕竟用心才是给妈妈们最好的礼物.下面小编为 ...
- html简单边框制作--特效文字制作及代码,一、 教你制作漂亮的HTML代码特效贴
一. 教你制作漂亮的HTML代码特效贴 一个完整的HTML帖子应该是: 美贴=背景+文章+插图+收尾 [size=+1]原代码如下: [size=+2] [size=+2]帖子的文章加图片 [size ...
- 5分钟教你制作属于自己的原创风景素材,做自媒体找素材太难?
今天这期内容来教大家制作一个自己的风景视频素材,用这种方法去制作几乎是没有重复度的,也不用担心侵权的问题. 直接上干货: 1.先在剪辑软件中导入一段风景视频素材,我们可以平时自己拍摄.收集一些视频素材 ...
- 一部手机就能搞定!3分钟教你制作专属片头片尾,简单易懂
相信很多人在空闲时间刷视频休闲时,都会被那些吸引人的片头给吸引并看完整个内容. 现在很多自媒体平台都有自动播放量的功能,那些优质的片头就更加容易被别人看见. 今天这期内容大周就来教大家如何制作带有个人 ...
- 新手看完学会,5分钟教你制作吸引人的片头片尾,操作简单
相信大家在刷视频的时候会在视频前面有一个自动播放的功能,这个功能可以让我们的优质内容让更多的人看到. 那么我们视频作品片头的重要性就不言而喻了,有片头片尾的视频原创度都是比较高的. 视频原创度越高,视 ...
- 5分钟教你制作狂拽酷炫的投资交易图
金融产品投资已经成为日常生活中常见的投资形式.某交易所要更好地掌握交易情况,每天收盘后公布当天的交易数据报告,包括当天的成交量,两周内的成交量与环比增长率.各金融产品的交易情况等.鉴于金融行业的特殊性 ...
- 5分钟教你制作独一无二的卡通头像,新手做自媒体,不敢真人露脸
不想真人露脸拍摄视频,也不会剪辑视频,但是又想做自媒体怎么办? 相信大家也刷到过那些带卡通头像的视频,这简直就是新手朋友做自媒体的福音,不用真人露脸,也不需要有多高深的剪辑技巧. 通过这个方法你也可以 ...
- AE怎么制作3D小火箭?2分钟教你制作动画
谁能拒绝一个胖胖又可爱的小火箭动画呢?不管是在片头里还是在UI动画里,我们都能够见到小火箭动画的身影,今天我们就来讲讲小火箭动画是怎么用AE制作的. 1.打开AE,获取火箭.火箭翅膀.火箭窗户.火焰等 ...
- Python五分钟教你制作一个太阳
from turtle import *color('red','yellow')begin_fill()while True:forward(300)left(200)if abs(pop()) & ...
最新文章
- java内部类的权限符,static介绍、内部类、final、权限修饰符的作用范围,
- Entity Framework 实体关系总结:one-to-one, one-to-many, many-to-many
- SDRAM芯片初始化、行有效、列读写时序(高手进阶,终极内存技术指南——完整/进阶版) ——本文为转载...
- C++面向对象基础(二)
- Codeforces 671D. Roads in Yusland(树形DP+线段树)
- java session持久化_Session的生命周期和持久化
- C语言中队列、堆栈、内存映射、多线程概念
- Adobe illustrator 直接选择工具删除白板 - 连载 6
- 招生 | 上海交通大学人工智能课题组招收博士生
- Ⅴ0还有别的方法设置图案吗_水冷空调扇如何使用 水冷空调扇使用方法介绍【图文】...
- C++的堆与拷贝构造函数
- 科大讯飞语音识别芯片_科大讯飞造家电专用语音芯片 市场机会在哪里?
- React.js组件化开发第一步(框架搭建)
- visionpro 窗口显示文字
- 普通函数和Generator函数递归获取嵌套数组的最大值
- vs2005安装使用指南
- android 辅助功能(无障碍)
- html 网站发布到公网
- 现代大学英语精读第二版(第三册)学习笔记(原文及全文翻译)——6B - They Dared Cocaine—and Lost(尝试可卡因后,他们迷失了)
- 壁纸网站研究:强大到没朋友的壁纸网站整理(动漫/二次元/宅男/风景/真人)
热门文章
- 十、roswtf错误检查工具入门(ROS)
- Java中使用二维数组打印出杨辉三角
- 如何获取Intel平台上网卡的最佳性能,网卡与内存、cpu统一numa
- 基于stm32的RFID识别MQTT智能饮水机onenet数据传输(实物图+源码+原理图+全套资料)
- 如何快速定位SElinux问题并修复?
- Intellij IDEA 主题导入与删除
- linux编程之经典多级时间轮定时器(C语言版)
- C#实现将汉字转换为拼音
- avr模拟串口通讯c语言,AVR系列之串口通讯
- layui 日期重置_layui日历组件,点击清空按钮,让日期插件选中的值清空