zoukankan      html  css  js  c++  java

  • html5离线记事本

     

    离线记事本
    离线记事本

     

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

    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. } 
    80.  
    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. } 
    93.  
    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. }); 
    113.  
    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. }); 
    145.  
    146. $('body').on('click','#noteList .title', function(){ 
    147. $(this).next().slideToggle(); 
    148. }); 
    149.  
    150. showList(); 
    151. }) 
    152. </script> 
    153. </body> 
    154. </html> 
  • 相关阅读:
    oracle 17068
    Nginx
    B/S端开发工具DevExtreme Angular控件
    UI组件库Kendo UI for Angular入门指南教程
    DevExpress WinForms v21.1
    WPF应用界面开发入门教程
    界面控件Telerik UI for WinForm初级教程
    十六、内联style.html
    十五、css样式class的多种用法
    十四、系统修饰键
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600655.html
Copyright © 2011-2022 走看看