离线记事本

这是一个笔记应用,不需要联网,也不需要数据库,可以直接把数据储存在本地.方便易用! ^_^

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>记事本</title> 
  6. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
  7. <style> 
  8. *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft Yahei'; font-size: 14px; box-sizing: border-box;} 
  9. h1{text-align: center; font-size: 26px; line-height: 60px;color: #ff8140;} 
  10. .main{margin: 10px auto;width: 1000px; overflow: hidden; height: 500px;padding: 1%;border: 1px solid #ddd; border-radius: 5px;} 
  11. input{ width: 92%; padding: 5px; outline: none;border: 1px solid #eee;} 
  12. textarea{ width: 100%; overflow: hidden; padding: 5px; outline: none; resize:none; } 
  13. textarea:focus,input:focus { border-color: #f77c3d; } 
  14. .write{padding: 10px; border-radius: 3px; background: #eee; overflow: hidden; float: left;width: 48%;} 
  15. .send{ background: #ff8140; border: 1px solid #f77c3d; color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); 
  16. width: 80px; height: 30px; text-align: center; line-height: 30px; border-radius: 3px; float: right; cursor: pointer; } 
  17. .list{padding: 10px; float: left;width: 50%;} 
  18. .item{padding: 10px;border: 1px solid #eee;border-radius: 3px;margin-bottom: 10px;} 
  19. .item .content{padding: 20px 10px;word-break:break-all;background: #fff; display: none;} 
  20. .title{padding-bottom: 5px;border-bottom: 1px solid #eee;cursor: pointer;} 
  21. .title span{color: #999; font-size: 12px;float: right;} 
  22. #noteList{overflow-y: scroll;height: 350px;box-shadow: 0 0 3px #ddd;} 
  23. </style> 
  24. </head> 
  25. <body> 
  26. <h1>记事本</h1> 
  27. <div class="main"> 
  28. <div class="write" id="write"> 
  29. 标题: <input id="title" type="text" placeholder="请输入标题"><br><br> 
  30. 分类: <select id="type"> 
  31. <option value="默认" selected>-请选择-</option> 
  32. <option value="美食">美食</option> 
  33. <option value="代码">代码</option> 
  34. <option value="生活">生活</option> 
  35. </select> 
  36. <br><br> 
  37. <textarea name="" id="cont" cols="30" rows="10" placeholder="今天想说点啥..."></textarea> 
  38. <div class="send" id="add">添加</div> 
  39. </div> 
  40. <div class="list" id="list"> 
  41. 标题: <input id="title1" type="text" placeholder="查询标题"><br><br> 
  42. 分类: <select id="type1"> 
  43. <option value="默认" selected>-请选择-</option> 
  44. <option value="美食">美食</option> 
  45. <option value="代码">代码</option> 
  46. <option value="生活">生活</option> 
  47. </select> 
  48. <div id="search" class="send">查询</div><br><br> 
  49. <div id="noteList"></div> 
  50. </div> 
  51. </div> 
  52. <script type="template" id="temp"> 
  53. <div class="item"> 
  54. <div class="title">@title<span>@type: @date</span></div> 
  55. <div class="content">@cont</div> 
  56. </div> 
  57. </script> 
  58. <script> 
  59. $(function(){ 
  60. var init = {title:'这是标题', 
  61. date:new Date().toLocaleString(), 
  62. type:'示例', 
  63. cont:'这是一个笔记应用,不需要联网,也不需要数据库,可以直接把数据储存在本地.方便易用!^_^'}; 
  64. function show(notes){ 
  65. var temp = $('#temp').html(); 
  66. var tempStr= ''; 
  67. //如果不是数组,变成数组 
  68. if(!Array.isArray(notes)){ 
  69. notes = [notes]; 
  70. } 
  71. for(var i=notes.length-1;i>-1;i--){ 
  72. var note = notes[i]; 
  73. tempStr += temp.replace('@title',note.title) 
  74. .replace('@date',note.date) 
  75. .replace('@type',note.type) 
  76. .replace('@cont',note.cont); 
  77. } 
  78. $('#noteList').html(tempStr); 
  79. } 
  81. //读取所有数据 
  82. function showList(){ 
  83. var notes = localStorage.getItem('notes'); 
  84. if(!notes){ 
  85. show(init); 
  86. }else{ 
  87. notes = JSON.parse(notes); 
  88. show(notes); 
  89. } 
  90. //第一个展开 
  91. $('#noteList .item:first').find('.title').trigger('click'); 
  92. } 
  94. $('#add').click(function(){ 
  95. var title = $('#title').val(); 
  96. var cont = $('#cont').val(); 
  97. var type = $('#type').val(); 
  98. if(title == ''){ 
  99. alert('标题不能为空!'); 
  100. return; 
  101. } 
  102. var data = {title:title,cont:cont,type:type,date:new Date().toLocaleString()}; 
  103. var notes = localStorage.getItem('notes'); 
  104. if(!notes){ 
  105. notes = []; 
  106. }else{ 
  107. notes = JSON.parse(notes); 
  108. } 
  109. notes.push(data); 
  110. localStorage.setItem('notes',JSON.stringify(notes)); 
  111. showList(); 
  112. }); 
  114. $('#search').click(function(){ 
  115. var title = $('#title1').val(); 
  116. var type = $('#type1').val(); 
  117. var notes = localStorage.getItem('notes'); 
  118. if(!notes){ 
  119. alert('没有本地笔记数据!'); 
  120. return; 
  121. }else{ 
  122. notes = JSON.parse(notes); 
  123. } 
  124. var note = []; 
  125. for(var i=0;i<notes.length;i++){ 
  126. //notes[i] json对象 
  127. var flag = false; 
  128. if(!title){ 
  129. flag = notes[i].type==type; 
  130. }else if(!type){ 
  131. flag = notes[i].title.indexOf(title)>-1; 
  132. }else{ 
  133. flag = notes[i].title.indexOf(title)>-1 && notes[i].type==type; 
  134. } 
  135. if(flag){ 
  136. note.push(notes[i]); 
  137. } 
  138. } 
  139. if(note.length == 0){ 
  140. alert('抱歉~没有对应的笔记!'); 
  141. }else{ 
  142. show(note); 
  143. } 
  144. }); 
  146. $('body').on('click','#noteList .title', function(){ 
  147. $(this).next().slideToggle(); 
  148. }); 
  150. showList(); 
  151. }) 
  152. </script> 
  153. </body> 
  154. </html> 

html5离线记事本的更多相关文章

  1. 1分钟快速制作漂亮的Html5本地记事本

    大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...

  2. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  3. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  4. HTML5离线Web应用实战：五步创建成功

    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...

  5. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  6. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  7. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  8. Manifesto – HTML5 离线应用程序缓存校验工具

    Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...

  9. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

随机推荐

  1. 2018年度最优秀mac软件及游戏推荐，个个万里挑一

    今天和大家带来2018年度最优秀Mac软件和游戏合集,个个万里挑一,2018年,风云社区(scoee.com)分享了上数千款优秀的Mac软件和游戏,结合用户反馈,精选出各个类别的优秀的Mac软件,推荐 ...

  2. Hbase学习03

    第3章 Hbase数据存储模型与工作组件 Data格式设计的的总体原则是按照需求要求,依据Hbase性能的相关标准规范和文件,并遵循“统一规范.统一数据模型.统一规划集群.分步实施”的原则,注重实际应 ...

  3. 深入浅出 JavaWeb：Servlet必会必知

    一.Web服务器 从事web开发的人,会很清楚一个东西叫HTTP服务器,比如JEE开发—Tomcat,Jetty,.NET开发—ISS等.HTTP服务器是使用 HTTP(超文本传输协议) 与客户机浏览 ...

  4. Hadoop记录-Yarn命令

    概述 YARN命令是调用bin/yarn脚本文件,如果运行yarn脚本没有带任何参数,则会打印yarn所有命令的描述. 使用: yarn [--config confdir] COMMAND [--l ...

  5. 异常来自 HRESULT:0x80070057 (E_INVALIDARG)(转)

    莫名其妙的编译总会报错 异常来自 HRESULT:0x80070057 (E_INVALIDARG) 未能加载程序集....... 几次删除引用然后重新引用程序集还是报错 奔溃中.... 网上搜索还真 ...

  6. ant design环境搭建过程中遇到的问题--Windows-dva-cli

    基础的此处略去,nodejs和npm是前提. 1.官网介绍的是脚手架工具是antd-init,但是又建议真实项目中用dva-cli,所以博主就直接装的是dva-cli,这里主要是简单介绍下博主在Win ...

  7. getResource()和getResourceAsStream以及路径问题【转】【补】

    一 getResource 用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大常最经常用的,就是用JAVA的File类,如要取得c:/test.txt文件,就 ...

  8. PHPMYWIND4.6.6前台Refer头注入+后台另类getshell分析

    下载链接 https://share.weiyun.com/b060b59eaa564d729a9347a580b7e4f2 Refer头注入 全局过滤函数如下 function _RunMagicQ ...

  9. Python复习笔记（五）面向对象

    1. __init__方法 # 1. 为对象在内存 中分配空间 -- 创建对象 # 2. 为对象属性 设置初始值 -- 初始化方法(init)+-------------- # 3. __init__ ...

  10. C# 获取程序运行时路径

    Ø  前言 开发中,很多时候都需要获取程序运行时路径,比如:反射.文件操作等..NET Framework 已经封装了这些功能,可以很方便的使用. C# 中有很多类都可以获取程序运行时路径,我们没必要 ...