本地存儲與地理信息

来源: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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類