效果如下：
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | <!DOCTYPE HTML><html><head> <title>Navigator</title> <meta charset="utf-8" /> <style type="text/css"> body{ font-family: "Microsoft YaHei"; margin: 0px; padding: 0px; } #title{ text-align: center; background-color: rgba(0,153,255,.7); padding-top: 20px; padding-bottom: 20px; } h1, h4{ margin: 0px; color: white; } a{ text-decoration: none; } .bar{ margin:8px; padding: 5px; } input[type="button"]{ border:1px solid #aaa; background-color: rgba(0,111,255,.8); border-radius: 3px; } button{ border-radius: 3px; } #footer, #footer-show{ position: fixed; bottom: 0px; text-align: right; background-color: rgba(0,153,255,.4); } #footer{ width: 100%; display:inline; } #footer-show{ right: 0px; display: none; } .add{ text-indent: 1em; } </style> <script type="text/javascript"> var websites = [{ "index": "0", "name": "百度", "site": "http://www.baidu.com", "describe": "搜索" }, { "index": "1", "name": "163邮箱", "site": "http://mail.163.com", "describe": "工作" }, { "index": "2", "name": "人人", "site": "http://www.renren.com", "describe": "社交" }]; function fill(i) { if(localStorage.getItem(localStorage.key(i)) == "undefined") return; var value = eval('(' + localStorage.getItem(localStorage.key(i)) + ')'); var drop = document.createElement("button"); drop.setAttribute("onclick", "drop(this);"); drop.setAttribute("id", value.index); drop.innerHTML = "-"; var newa = document.createElement("a"); newa.target = "_blank"; newa.href = value.site; newa.innerHTML = value.name; if (value.describe != "") var describe = document.createTextNode(" (" + value.describe + ")"); else var describe = document.createTextNode(""); var bar = document.createElement("div"); bar.setAttribute("class", "bar"); var website = document.getElementById("websites"); bar.appendChild(drop); bar.appendChild(newa); bar.appendChild(describe); website.appendChild(bar); } function drop(object) { object.parentNode.parentNode.removeChild(object.parentNode); localStorage.removeItem("website" + object.getAttribute("id")); window.location.reload(); } function add() { var index = localStorage.length; localStorage.setItem("website" + index, "{\"index\":\"" + index + "\", \"name\":\"" + document.getElementById("name").value + "\", \"site\":\"" + document.getElementById("site").value + "\", \"describe\":\"" + document.getElementById("describe").value + "\"}"); init(); window.location.reload(); } function clear() { var web = document.getElementById("websites"); while (web.firstChild) web.removeChild(web.firstChild); } function clearAll(){ clear(); localStorage.clear(); window.location.reload(); } function addInit() { clear(); for (var i = 0; i < websites.length; i++) localStorage.setItem("website" + i, JSON.stringify(websites[i])); window.location.reload(); } function init() { clear(); for (var i = 0; i < localStorage.length; i++) { fill(i); } } function hide(){ document.getElementById("footer").style.display = "none"; document.getElementById("footer-show").style.display = "inline"; } function show(){ document.getElementById("footer-show").style.display = "none"; document.getElementById("footer").style.display = "inline"; } </script></head><body onload="init();"><div id="title"><h1>个 人 网 站 导 航</h1></div><div id="websites"></div><div>添加：</div><div>网站名称：<input type="text" id="name" /> 网站地址：<input type="text" id="site" value="http://" /> 网站备注：<input type="text" id="describe" /><button onclick="add();" style="width:60px">+</button><input type="button" value="初始化" onclick="addInit();" /><input type="button" value="清除所有" onclick="clearAll();" /></div><br /><div id="footer"> <h4> <div style="position:fixed; text-aligh:left"> </div> <div id="hide" style="position:float; text-align:right;" onclick="hide();"> <a href="#" onclick="hide();">hide</a> </div> </h4></div><div id="footer-show"><a id="show" href="#" onclick="show();"><strong>show</strong></a></div></body></html> |
复制到记事本中保存为html格式，用chrome打开，IE不支持localstorage本地存储= =。
昨天说的希望做个学校网站导航的玩意儿，方便管理，昨天用一个晚上实现了，当然初始化网址改掉了，不是学校的那些网址了，自己填删即可。
用到了html5 LocalStorage本地存储和JSON，因为想用一个文件就实现，所以没用jQuery和很多的UI美化。
当然，这样的话，UI简直不忍直视，果然自己不是搞设计的。。。
算是自己做着玩得吧~