純JS寫的一款記錄事項的單頁應用
阿新 • • 發佈：2017-10-06
ctype -- length css rip 使用 div table png
要點：
1.使用localStorage存儲
2._change_record_progress函數以字符串作為參數，用eval執行這個參數
3.使用了jQuery自定義事件，便於數據改變時實時更新顯示
4.這一版代碼中不考慮CSS問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- jquery --> <script src="jquery-3.2.1.js"></script><title>進度記錄工具</title> </head> <body> <table> <tr> <td><input type="text" id=‘item‘></td> <td><input type="text" id=‘progress‘></td> <td><input type="button" value="保存" onclick="save()"></td> </tr> </table> <script> $( function() { show(); $(this).bind("record_progress_is_changed",show); } ); function show(){ $("table tr:gt(0)").remove();var o = JSON.parse(localStorage.record_progress || "{}"); for(var k in o){ var html = "<tr><td>"+k+"</td><td>"+o[k]+"</td></tr>"; $html = $(html).append("<td><a href=‘javascript:void(0);‘ onclick=‘my_delete.call(this)‘>刪除</a></td>"); $("table").append($html); } } function save(){ var item = $("#item"); var progress = $("#progress"); if(item.length != progress.length){ console.error("有錯誤，條目數和進度數不匹配!"); return false; } _change_record_progress("o[‘"+item.val()+"‘]=‘"+progress.val()+"‘;"); item.val(""); progress.val(""); } function my_delete(){ var $this = $(this); var item = $this.parent().prev().prev(); _change_record_progress("delete o[‘"+item.text()+"‘];"); } function _change_record_progress(str){ var o = JSON.parse(localStorage.record_progress || "{}"); eval(str); localStorage.record_progress=JSON.stringify(o); $.event.trigger("record_progress_is_changed"); } </script> </body> </html>
純JS寫的一款記錄事項的單頁應用