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> 
  • 相关阅读:
    Add Two Numbers
    Reverse Linked List II
    Reverse Linked List
    Remove Duplicates from Sorted List
    Remove Duplicates from Sorted List II
    Partition List
    Intersection of Two Linked Lists
    4Sum
    3Sum
    2Sum
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600655.html
Copyright © 2011-2022 走看看