1分钟快速制作漂亮的H5本地记事本
大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾《五步教你制作漂亮精致的HTML时钟》,还有《一分钟教你如何实现唯美的文字描边》;今天给大家分享一个用H5 + localStorage开发的一个本地记事本应用,下面先看一下他精美的帅样子吧。
主要实现的功能有:
- 填写标题验证功能,标题不能为空
- 可以选择分类:默认/生活/美食/代码
- 添加成功后,立即显示
- 可以搜索标题和分类
- 笔记可以点击标题展开折叠
- 多条数据第一条展开显示,其余折叠显示
1.初始化数据
var init = {title:'这是标题',
date:new Date().toLocaleString(),
type:'示例',
cont:'这是一个笔记应用,不需要联网,也不需要数据库,可以直接把数据储存在本地.方便易用!^_^'};
当用户第一次打开应用时,给用户的提示信息。
2.封装显示数据的方法
外部传入要显示的数据,内部进行数据的拼接和渲染。
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相关技术文章。
1分钟快速制作漂亮的H5本地记事本的更多相关文章
- 1分钟快速制作漂亮的Html5本地记事本
大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...
- h5快速制作工具-企业级. 非个人无水印
Epub360 Epub是团队引入的专业级H5应用开发工具,能够快速制作出高质量的H5运营交互页面,具有动画控制.交互设定.社交应用和数据应用的特点,其制作过程就类似于制作一个PPT,比较容易上手. ...
- 三分钟快速上手TensorFlow 2.0 (下)——模型的部署 、大规模训练、加速
前文:三分钟快速上手TensorFlow 2.0 (中)——常用模块和模型的部署 TensorFlow 模型导出 使用 SavedModel 完整导出模型 不仅包含参数的权值,还包含计算的流程(即计算 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- 【公开课】《奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱》文字记录与反馈
本期分享的内容: <奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱> 时间:2016年11月02日 课程主讲人:叶锡文 从事商业智能行业,有丰富的实施经验,擅长 ...
- 一分钟快速入门openstack
一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...
- 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- 5分钟快速打造WebRTC视频聊天<转>
原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...
- WebSlides - 轻松制作漂亮的 HTML 幻灯片(演讲稿)
WebSlides 是一个开源的 HTML 幻灯片项目,能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片.页面中的每个 <section> 都是一个独立的幻灯片,只需要很少的 CSS ...
随机推荐
- logistics回归理解
多元回归方程:假设有一个因变量y和一组自变量x1, x2, x3, ... , xn,其中y为连续变量,我们可以拟合一个线性方程: y =β0 +β1*x1 +β2*x2 +β3*x3 +...+βn ...
- php操作redis数据库方法总结
一.安装php_redis扩展,用以操作redis http://pecl.php.net/package/redis 选择自已系统php版本对应的扩展. 二.redis连接与验证 <?php ...
- crontab学习
概念 日志路径 /var/log/cron 配置路径 vi /etc/crontab 参考 https://www.cnblogs.com/kenshinobiy/p/7685229.html 问题 ...
- python3 经典排序方法
1.插入排序: def nsert_sort(list): for i in range(len(list)): for j in range(i): if list[i] < list[j]: ...
- 将EditPad Lite 加入鼠标右键
> 开始 > regedit 如图新建shell及command
- skynet记录2:模块简介
稍后填坑 bson.so client.so lpeg.so md5.so skynet.so sproto.so gate.so harbor.so logger.so snlua. ...
- 网址导航18C
[名站] 百度 网易 腾讯 新华 中新 凤凰 [新闻] 联合早报 南方周末 澎湃新闻 [系统] 宋永志 蒲公英 技术员 装机网 系统之家 [软件] 星愿浏览器 微PE [分享] zd423 殁飘遥 ...
- 面试简单整理之rabbitmq
135.rabbitmq 的使用场景有哪些? 单反单收,单发多收,发布订阅,按路由发送,按主题发送 136.rabbitmq 有哪些重要的角色? Server,Consumer,Producer 13 ...
- Python 数据可视化 -- pillow 处理图像
Python 图像库(Python Image Library,PIL)为 Python 提供了图像处理能力. PIL 官网:http://www.pythonware.com/products/pi ...
- Jquery源码学习日记(1)
https://jquery.com/ 最新源码下载链接:jquery3.0 135-231定义了一些jquery的通用方法 233-301行定义了一些继承的方法 302-477定义了一些工具类方法 ...