星空网 > 软件开发 > 网页设计

本地存储与地理信息

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src='/images/loading.gif' data-original="http://api.map.baidu.com/api?v=2.0&ak=38eb639e879917744ea99da35bd1648a"></script> <script src='/images/loading.gif' data-original="jquery-1.7.2.js"></script> <script src='/images/loading.gif' data-original="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 id="record">  <form id="fr">   <p>    标题:    <input type="text" name="title" />   </p>   <p>    <label>内容:</label>    <textarea name="content"></textarea>   </p>  </form>  <button id="save_local">保存本地</button>  <button id="save_server">保存服务器</button>  <button id="del">删除所有数据</button>  <input type="checkbox" id="Get_map" />记录地图位置 </div> <div id="detile">  <ul id="list">   <li></li>   <li>    <div>     <input type="button" id="back" value="后退" />     <input type="button" id="Go" value="前进" />    </div>    <input type="text" name="title" />    <textarea name="content"></textarea>   </li>   <li>    <input type="button" id="back2" value="后退" />    <div id="map"></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

 1 // JavaScript Document 2 //缓冲运动 3  4  5 //缓冲运动 6  function StartMove(obj,json,fn){ 7    8   clearInterval(obj.timer); 9   obj.timer=setInterval(function(){ 10     var bStop=true; 11     12    for(var attr in json) 13    { 14     var iCu=0; 15     if(attr=='opacity') 16     {iCu= parseInt(parseFloat(GetStyle(obj,attr))*100);}//处理小数问题,扩大倍数 17     else 18     {iCu=parseInt(GetStyle(obj,attr));} 19      20      21     var iSpeed=(json[attr]-(iCu))/8; 22     iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 23     if(iCu!=json[attr]) 24     { bStop=false;} 25     if(attr=='opacity') 26     { 27      obj.style.filter='alpha(opacity:'+(iCu+iSpeed)+')'; 28      obj.style.opacity=(iCu+iSpeed)*100; 29     } 30     else 31     { 32      obj.style[attr]=iCu+iSpeed+'px'; 33     } 34    } 35     36    if(bStop) 37    { 38     clearInterval(obj.timer); 39     if(fn) 40     { 41      fn(); 42     } 43    } 44   },30); 45    46   } 47    48 //弹性运动 49 var iSpeed_Tanxing=0; 50 var left_Tanxing=0;//将 小数存放在变量中 解决小数显示问题 51 function move_Tan(obj,iTaget){ 52  53  clearInterval(obj.timer); 54  obj.timer=setInterval(function(){ 55   /* 56   弹性运动公式 57   */ 58   iSpeed_Tanxing+=(iTaget-obj.offsetLeft)/5; 59   iSpeed_Tanxing*=0.7 60   left_Tanxing+=iSpeed_Tanxing; 61    62   if(Math.abs(iSpeed_Tanxing)<0.1&&Math.abs(left_Tanxing-iTaget)<0.1)//在一定范围内就停止定时器,解决目标点问题 63   {clearInterval(obj.timer);obj.style.left=iTaget+'px';} 64   else 65   obj.style.left=left_Tanxing+'px'; 66    67   },30); 68  }   69    70 //碰撞运动 71 var iSpeedX_Pengzhuang=0; 72 var iSpeedY_Pengzhuang=0; 73 function move_Peng(obj){ 74  clearInterval(obj.timer); 75  obj.timer=setInterval(function(){ 76   iSpeedY_Pengzhuang+=3; 77   L=obj.offsetLeft+iSpeedX_Pengzhuang; 78   T=obj.offsetTop+iSpeedY_Pengzhuang; 79   if(T>=document.documentElement.clientHeight-obj.offsetHeight) 80   { 81     iSpeedY_Pengzhuang*=-0.8; 82     iSpeedX_Pengzhuang*=0.8; 83     T=document.documentElement.clientHeight-obj.offsetHeight; 84   } 85   else if(T<=0) 86   { 87     iSpeedY_Pengzhuang*=-0.8; 88     iSpeedX_Pengzhuang*=0.8; 89     T=0; 90   } 91   if(L>=document.documentElement.clientWidth-obj.offsetWidth) 92   { 93     iSpeedY_Pengzhuang*=0.8; 94     iSpeedX_Pengzhuang*=-0.8; 95     L=document.documentElement.clientWidth-obj.offsetWidth; 96   } 97   else if(L<=0) 98   { 99     iSpeedY_Pengzhuang*=0.8;100     iSpeedX_Pengzhuang*=-0.8;101     L=0;102   }103   if(Math.abs(iSpeedX_Pengzhuang)<0.5)104   {105    iSpeedX_Pengzhuang=0;106   }107   if(Math.abs(iSpeedY_Pengzhuang)<0.5)108   {109    iSpeedY_Pengzhuang=0;110   }111   obj.style.left=L+'px';112   obj.style.top=T+'px';113   },30);114  }115   116   117 function GetStyle(obj,attr){118  119  if(obj.currentStyle)120  {121   return obj.currentStyle[attr];122   }123  else124  {125   return getComputedStyle(obj,false)[attr];126   }127  };128  129 function getClassNames(oParent,className){130  var obj=oParent.getElementsByTagName('*');131  var attr=[];132  var re=new RegExp('\\b'+className+'\\b');133  for(var i=0; i<obj.length;i++)134  {135   if(re.test(obj[i].className))136   {attr.push(obj[i]);}137   }138  return attr;139  }

 

原标题:本地存储与地理信息

关键词:地理

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

大批TikTok卖家封店铺!汇率暴跌至20年新低!FOBGOODS发声明 :https://www.goluckyvip.com/news/6778.html
Shopee品类深度解析! 电子2022爆单趋势: 高潜市场及热卖商品公布:https://www.goluckyvip.com/news/6779.html
Shopee台湾爆单日历:儿童节热卖品详解:https://www.goluckyvip.com/news/678.html
2021-2022年TikTok越南市场报告:https://www.goluckyvip.com/news/6780.html
跨境不止独立站跟亚马逊,品牌出海何不提前布局东南亚电商Lazada&shopee :https://www.goluckyvip.com/news/6781.html
Shopee产品如何优化?你只需要做好以下几个方面! :https://www.goluckyvip.com/news/6782.html
海陵岛马尾岛景点介绍 海陵马尾岛图片:https://www.vstour.cn/a/363177.html
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流