本地存储与地理信息 - 左转右转_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://api.map.baidu.com/api?v=2.0&ak=38eb639e879917744ea99da35bd1648a"></script> <script src="jquery-1.7.2.js"></script> <script src="move.js"></script> <style> * { padding: 0; margin: 0; } li { list-style: none; } .clear { clear: both; } #record { padding: 10px; float: left; border: 1px solid red; margin-right: 2px; } #record input[name=title] { height: 30px; width: 200px; outline: none; font-size: 16px; } #record textarea[name=content] { height: 400px; width: 300px; outline: none; resize: none; font-size: 16px; } #record p label { float: left; margin-right: 5px; } #detile { width: 300px; border: 1px solid red; position: relative; overflow: hidden; left: 0px; top: 0; } #list { width: 900px; position: relative; height: 480px; left: 0px; } #list li { width: 300px; height: 200px; float: left; } #list li:first-child div { border-bottom: 1px dashed red; height: 26px; line-height: 25px; filter: alpha(opacity=0); opacity: 0; cursor: pointer; } #list li:nth-child(2) div #Go { float: right; } #list li:nth-child(2) input[name=title] { height: 30px; width: 200px; outline: none; font-size: 16px; border: none; } #list li:nth-child(2) textarea[name=content] { height: 460px; width: 300px; outline: none; resize: none; font-size: 16px; border: none; border-top: 1px solid #e6dcdc; } #map { width: 300px; height: 480px; } </style> </head> <body> <div> <form> <p> 标题： <input type="text" /> </p> <p> <label>内容：</label> <textarea></textarea> </p> </form> <button>保存本地</button> <button>保存服务器</button> <button>删除所有数据</button> <input type="checkbox" />记录地图位置 </div> <div> <ul> <li></li> <li> <div> <input type="button" value="后退" /> <input type="button" value="前进" /> </div> <input type="text" /> <textarea></textarea> </li> <li> <input type="button" value="后退" /> <div></div> </li> </ul> </div> </body> </html> <script> var iNow = window.localStorage.getItem('num') || -1; var oUl = document.getElementById('list'); var aLi = oUl.getElementsByTagName('li'); $(document).ready(function () { if (window.localStorage.getItem('num')) { var list = arr(window.localStorage); //console.log(window.localStorage) for (var i = 0; i < list.length; i++) { if (isContains(list[i].name, 'title')) { var oDiv = document.createElement('div'); oDiv.index = list[i].name.split('|')[1]; oDiv.innerHTML = window.localStorage.getItem(list[i].name); AppOrInsertChild(aLi[0], oDiv); } } } //var aDiv = aLi[0].getElementsByTagName('div'); //for (var i = 0; i < aDiv.length; i++) { // aDiv[i].onmouseover = function () { // this.style.cssText = 'background:red;color:#FFF'; // } // aDiv[i].onmouseleave = function () { // this.style.cssText = 'background:#FFF;color:#000'; // } // aDiv[i].onclick = function (ev) { // //console.log(this.index) // var oTitle = $('#list li').eq(1).find('input[name=title]'); // oTitle.val(this.textContent); // var oContent = $('#list li').eq(1).find('[name=content]'); // oContent.val(window.localStorage.getItem('content|' + this.index)); // StartMove(oUl, { left: -aLi[0].offsetWidth }); // } //} aLi[0].onmouseover = function (ev) { var ev = ev || event; var target = ev.target || ev.srcElement; // console.log(target.index); if (target.nodeName.toLowerCase() == 'div') //target.style.cssText = 'background:red;color:#FFF'; {target.style.background='red'; target.style.color='#FFF';} } aLi[0].onmouseout = function (ev) { var ev = ev || event; var target = ev.target || ev.srcElement; // console.log(target.index); if (target.nodeName.toLowerCase() == 'div') { //target.style.cssText = 'background:#FFF;color:#000'; target.style.background='#FFF'; target.style.color='#000';} } aLi[0].onclick = function (ev) { var ev = ev || event; var target = ev.target || ev.srcElement; if (target.nodeName.toLowerCase() == 'div') { var oTitle = $('#list li').eq(1).find('input[name=title]'); oTitle.val(target.textContent); var oContent = $('#list li').eq(1).find('[name=content]'); oContent.val(window.localStorage.getItem('content|' + target.index)); if (window.localStorage.getItem('Get_map|' + target.index)) { //alert(11); $('#Go').get(0).disabled = false; } else { $('#Go').get(0).disabled = true; } StartMove(oUl, { left: -this.offsetWidth }); } } }); $('#save_local').click(function () { var json = $('#fr').serializeArray(); iNow++; window.localStorage.setItem(json[0].name + '|' + iNow, json[0].value); window.localStorage.setItem(json[1].name + '|' + iNow, json[1].value); window.localStorage.setItem('num', iNow); var isok = $('#Get_map').is(':checked'); navigator.geolocation.getCurrentPosition(function (position) { var y = position.coords.longitude; var x = position.coords.latitude; var json = { y: y, x: x }; if (isok) { window.localStorage.setItem('Get_map|' + iNow, JSON.stringify(json)); } else { window.localStorage.removeItem('Get_map|' + iNow); } }); createDiv(json); $('#Get_map').get(0).checked = false; }); $('#del').click(function () { window.localStorage.clear(); if (aLi[0].childNodes.length > 0) { for (var i = 0; i < aLi[0].childNodes.length; i++) { aLi[0].removeChild(aLi[0].childNodes[i]); } window.location.reload(); } }); $('#back').click(function () { StartMove(oUl, { left: 0 }); }); $('#back2').click(function () { StartMove(oUl, { left: -aLi[0].offsetWidth }); }); $('#Go').click(function () { StartMove(oUl, { left: -aLi[0].offsetWidth * 2 }); var m = JSON.parse(window.localStorage.getItem('Get_map|' + iNow)); var map = new BMap.Map("map"); var pt = new BMap.Point(m.y, m.x); map.centerAndZoom(pt, 14); map.enableScrollWheelZoom(); var marker2 = new BMap.Marker(pt); // 创建标注 map.addOverlay(marker2); }); function isContains(str, substr) { return new RegExp(substr).test(str); } arr = function (json) { var str = decodeURI($.param(json)); var result = []; var new_arr = str.split('&'); for (var i = 0; i < new_arr.length; i++) { var sut = new_arr[i].split('='); var arr = {}; arr.name = sut[0]; arr.value = sut[1]; result.push(arr); } return result; } function createDiv(json) { var oDiv = document.createElement('div'); oDiv.innerHTML = json[0].value; AppOrInsertChild(aLi[0], oDiv); } function AppOrInsertChild(node, aporinnode) { if (node.childNodes.length > 0) { node.insertBefore(aporinnode, node.childNodes[0]); } else { node.appendChild(aporinnode); } aporinnode.index = parseInt(window.localStorage.getItem('num')); var h = aporinnode.offsetHeight; aporinnode.style.height = 0; h.innerHTML = ''; StartMove(aporinnode, { height: h, opacity: 1 }); } </script>

　　所用move.js