- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>SO EASY!</title>
- <style type="text/CSS">
- html,body {
- background-color: #262;
- color: #fff;
- font-family: helvetica, arial, sans-serif;
- margin: 0;
- padding: 0;
- font-size: 11pt;
- }
- </style>
- <script lang='text/javascript'>
- window.addEventListener("load", eventWindowLoaded, false);
- var entries = [];
- var curIndex = -1;
- function eventWindowLoaded()
- {
- loadEntries(1);
- showNext();
- var dayselection = $("dayselection");
- dayselection.addEventListener("change", daysSelectionChanged, false);
- }
- function daysSelectionChanged(e)
- {
- var target = e.target;
- loadEntries(target.value);
- clearTextarea();
- curIndex = -1;
- showNext();
- log('总共'+entries.length+'个, 当前第'+(curIndex+1)+'个');
- }
- function loadEntries(days)
- {
- var now = new Date().getTime();
- var arr = [];
- for(var i=0; i<localStorage.length; i++)
- {
- var time = localStorage.key(i);
- var daysBetween = (now - time)/24/60/60/1000;
- // console.log(daysBetween);
- if (daysBetween <= days)
- {
- var value = JSON.parse(localStorage.getItem(time));
- var entry = {time: time, data: value};
- arr.push(entry);
- }
- }
- entries = arr;
- }
- function saveEntry()
- {
- var data_en = $('en').value;
- var data_zh = $('zh').value;
- var data = {en: data_en, zh: data_zh};
- var time = new Date().getTime();
- if (data_en =='' && data_zh == '') // TODO: 正则
- {
- alert('必须输入中英文表达!');
- }
- else
- {
- localStorage.setItem(time, JSON.stringify(data));
- // Update UI
- log('保存成功!');
- // ReLoad entries
- loadEntries($('dayselection').value);
- // Recovery current entry
- curIndex --;
- showNext();
- }
- }
- function deleteEntry()
- {
- var currentEntry = entries[curIndex];
- if (currentEntry)
- {
- localStorage.removeItem(currentEntry.time);
- // Update UI
- log('删除成功!');
- // Reload entries
- loadEntries($('dayselection').value);
- // Go to next entry
- curIndex --;
- showNext();
- }
- }
- function clearStorage()
- {
- localStorage.clear();
- log('数据初始化完成!');
- }
- function showNext()
- {
- if (curIndex +1 <= entries.length-1)
- {
- curIndex ++;
- var entry = entries[curIndex];
- showTextarea(entry.data);
- log('总共'+entries.length+'个, 当前第'+(curIndex+1)+'个');
- }
- }
- function showPrevious()
- {
- if (curIndex-1 >= 0)
- {
- curIndex --;
- var entry = entries[curIndex];
- showTextarea(entry.data);
- log('总共'+entries.length+'个, 当前第'+(curIndex+1)+'个');
- }
- }
- function showTextarea(data)
- {
- var target_en = $('en');
- var target_zh = $('zh');
- target_en.value = data.en;
- target_zh.value = data.zh;
- }
- function clearTextarea()
- {
- $('en').value = '';
- $('zh').value = '';
- }
- function $(id)
- {
- return document.getElementById(id);
- }
- function log(msg)
- {
- var target = document.getElementById('msg');
- target.innerHTML = msg;
- }
- </script>
- </head>
- <body>
- <div style="position: absolute; top: 50px; left: 50px;">
- 回顾:<select id="dayselection">
- <option value="1"> 1天内 </option>
- <option value="0.04166666667"> 1小时内 </option>
- <option value="3"> 3天内 </option>
- <option value="7"> 7天内 </option>
- <option value="14"> 14天内 </option>
- <option value="30"> 1月内 </option>
- <!-- <option value=""> </option> -->
- </select>
- </tr>
- <input type="button" id="prev" value="上一个" onclick="showPrevious();">
- <input type="button" id="next" value="下一个" onclick="showNext();">
- <hr> 英语表达:<br/>
- <textarea id="en" cols="40" rows="6"></textarea>
- <hr> 中文解释:<br/>
- <textarea id="zh" cols="40" rows="6"></textarea><br/>
- <input type="button" id="save" value="保存内容" onclick="saveEntry();">
- <input type="button" id="delete" value="删除内容" onclick="deleteEntry();">
- <hr> <p id="msg"></p>
- <div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/120820135084.html
来源: http://www.codesnippet.cn/detail/120820135084.html