本地存儲與地理信息

来源:http://www.cnblogs.com/liujianshe1990-/archive/2017/08/16/7375567.html
-Advertisement-
Play Games

所用move.js ...


<!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 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     else
124     {
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     }

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • python進階（7）：面向對象進階
    學了面向對象三大特性繼承，多態，封裝。今天我們看看面向對象的一些進階內容，反射和一些類的內置函數。 ...
  • 文件數據緩存（key-Value）
    為瞭解決大量數據緩存，消耗記憶體過多的問題，特別實現了文件緩存；該緩存主要是應用於多存少讀的情況，一般我們做緩存是實現將數據放在記憶體中或者資料庫中；放在記憶體中就會消耗很大記憶體，尤其在高併發大數據緩存時，更容易造成記憶體溢出，資料庫在很大程度能夠滿足我們需求，但是在極端情況，每秒產生很大數據時，資料庫速度 ...
  • 哪裡獲取ZBrush簡體中文版？
    ZBrush精簡版ZBrushCore發佈已經有一段日子了，相信不少人早已迫不及待地開始嘗試了，不知道你們的體驗如何？毋庸置疑的是，ZBrushCore專為剛接觸3D並希望進入3D雕刻、3D列印以及插畫世界的人而設計。 ...
  • TypeScript的使用
    1.TypeScript的下載和安裝 使用npm安裝： npm install -g typescript 註意：如果沒有安裝npm，npm為nodejs管理包，則可以嘗試先安裝nodejs，nodejs中會攜帶安裝npm 2. 使用tsc編譯工具將.ts文件編譯為.js文件 ...
  • HTML&CSS——網站註冊頁面
    1、表單標簽 所有需要提交到伺服器端的表單項必須使用<form></form>括起來！ form 標簽屬性： action,整個表單提交的位置(可以是一個頁面，也可以是一個後臺 java 代碼) method,表單提交的方式(get/post/delete……等 7 種) Get 與 post 提交 ...
  • HTML5語法基礎學習筆記
    1.行間樣式給單獨的標簽添加樣式.<div style="width:100px; height:100px; background-color:red;"></div>優點：比較方便可以即時的添加屬性。缺點：修改屬性非常麻煩、需要一個個去修改。 2.內聯樣式表<style>div{ <!--選擇器 ...
  • JS中的柯里化(currying)
    何為Curry化/柯里化？ curry化來源與數學家 Haskell Curry的名字 （編程語言 Haskell也是以他的名字命名）。 柯里化通常也稱部分求值，其含義是給函數分步傳遞參數，每次傳遞參數後部分應用參數，並返回一個更具體的函數接受剩下的參數，這中間可嵌套多層這樣的接受部分參數函數，直至 ...
  • [js高手之路] 設計模式系列課程 - 迭代器(1)
    迭代器是指通過一種形式依次遍曆數組，對象，或者類數組結構中的每個元素. 常見的有jquery中的each方法, ES5自帶的forEach方法. 下麵我們就來自定義一個類似jquery或者ES5的迭代器方法 輸出結果： ["zhangsan", "lisi", "ghostwu"] "zhangsa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類