HTML5--網絡狀態監聽/全屏/fileReader/定位一(11)

時間 2019-12-11

標籤 html5 html 網絡狀態監聽全屏 filereader 定位欄目 HTML5 简体版

原文原文鏈接

這節主要學習HTML5中新增經常使用的API，包括網絡狀態監聽、全屏、fileReader文件、定位、存儲.....，不少接口在瀏覽器端存在兼容問題，須要進行兼容處理。javascript

第一部分--網絡狀態監聽接口css

　 做用：判斷當前的網絡鏈接狀態，根據網絡狀態進行相應的操做。html

　　方法：前端

　　　　ononline：當網絡連通時觸發此事件java

　　　　onoffline：當網絡斷開時觸發此事件git

<body>
    <script>
        window.addEventListener("online", function () {
            alert("網絡連通了");
        });
        window.addEventListener("offline", function () {
            alert("網絡斷開了");
        });
    </script>
</body>

第二部分--全屏接口web

　 做用：對元素/文檔的全屏縮放操做的控制。chrome

　　方法：api

　　　　 requestFullScreen： 開啓全屏顯示，不一樣的瀏覽器須要添加不一樣的前綴。

　　　　 cancelFullScreen： 退出全屏顯示，不一樣瀏覽器須要添加不一樣的前綴，只能 用document調用( 是整個文檔退出，而非某個元素退出，因此須要用document調用)

　　　　 fullScreenElement：判斷是 否處於全屏狀態，也只能 用document調用。

<body>
    <div>
        <img src="../images/l1.jpg" alt="">
        <input type="button" id="full" value="全屏">
        <input type="button" id="cancelFull" value="退出全屏">
        <input type="button" id="isFull" value="是否全屏">
    </div>
    <script>
        window.onload=function(){
            var div=document.querySelector("div");
            // /!*全屏操做*!/
            document.querySelector("#full").onclick=function(){
                // /!*使用能力測試添加不一樣瀏覽器下的前綴*!/
                if(div.requestFullScreen){
                    div.requestFullScreen();
                }
                else if(div.webkitRequestFullScreen){
                    div.webkitRequestFullScreen();
                }
                else if(div.mozRequestFullScreen){
                    div.mozRequestFullScreen();
                }
                else if(div.msRequestFullScreen){
                    div.msRequestFullScreen();
                }
            }

            // /!*退出全屏*!/
            document.querySelector("#cancelFull").onclick=function(){
                if(document.cancelFullScreen){
                    document.cancelFullScreen();
                }
                else if(document.webkitCancelFullScreen){
                    document.webkitCancelFullScreen();
                }
                else if(document.mozCancelFullScreen){
                    document.mozCancelFullScreen();
                }
                else if(document.msCancelFullScreen){
                    document.msCancelFullScreen();
                }
            }

            // /!*判斷是不是全屏狀態*!/
            document.querySelector("#isFull").onclick=function(){
                // /!*兩個細節：使用document判斷  能力測試*!/
                if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                    alert(true);
                }
                else{
                    alert(false);
                }
            }
        }
    </script>
</body>

第三部分--fileReader文件接口數組

　　做用：讀取文件內容，並返回讀取的內容(字符串)

　　方法：

　　　　readAsText()：讀取文本文件內容，返回字符串，默認編碼是UTF-8.

　　　　readAsBinaryString()：讀取任意類型文件內容，返回二進制字符串。此方法不是用來讀文件給用戶看，而是存儲文件。例如：前端讀取文件內容，獲取二進制數據，傳遞給後臺，後臺接收了數據並將數據存儲。

　　　　readAsDataURL()：讀取文件得到以data開頭的字符串，字符串的本質就是DataURL，

DataURL是將資源轉換爲base64編碼的字符串形式，而且將這些內容直接存儲在url中。

　　　　abort()：停止讀取。

　　舉例：即時預覽

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 20px;
            width: 0%;
            background-color:red;
        }
    </style>
</head>
<body>
<form action="">
    文件： <input type="file" name="myFile" id="myFile"> <br>
    <div></div>
    <input type="submit">
</form>
<img src="" alt="">
<script>
   var div=document.querySelector("div");
    function getFileContent(){
       /!*1.建立文件讀取對象*!/
        var reader=new FileReader();
       /*  /!*2.讀取文件，獲取DataURL
        * 2.1.說明沒有任何的返回值:void：可是讀取完文件以後，它會將讀取的結果存儲在文件讀取對象的result中
        * 2.2.須要傳遞一個參數 binary large object:文件(圖片或者其它能夠嵌入到文檔的類型)
        * 2.3:文件存儲在file表單元素的files屬性中，它是一個數組*!/ */
        var file=document.querySelector("#myFile").files;
        reader.readAsDataURL(file[0]);
        /!*獲取數據*!/
        /* /!*FileReader提供一個完整的事件模型，用來捕獲讀取文件時的狀態
        * onabort:讀取文件中斷片時觸發
        * onerror:讀取錯誤時觸發
        * onload:文件讀取成功完成時觸發
        * onloadend:讀取完成時觸發，不管成功仍是失敗
        * onloadstart:開始讀取時觸發
        * onprogress:讀取文件過程當中持續觸發*!/ */
        reader.onload=function(){
            /!*展現*!/
            document.querySelector("img").src=reader.result;
        }

        reader.onprogress = function (e) {
            //var percent= e.loaded/ e.total*100+"%";
            console.log(e);
            div.style.width = percent;
        };
    }
</script>
</body>

第四部分--地理定位接口

　　做用：獲取用戶的地理位置信息，能夠基於用戶的位置開發基於位置服務的應用。

　　注意：瀏覽器自動選擇定位方式，咱們沒法設置瀏覽器的定位方式，瀏覽器默認不容許獲取當前用戶的位置信息，能夠手動設置在設置--高級設置--內容設置--位置(chrome)。

　　　　對象1：Geolocation：使用navigator.geolocation獲取

　　　　　　　　方法1：getCurrentPosition(success， [error]， option)：獲取當前用的地理信息。

　　　　　　　　參數：

　　　　　　　　　　success：獲取地理信息成功後執行的回調。

　　　　　　　　　　error：獲取地理信息失敗後執行的回調。

　　　　　　　　　　option：設置獲取當前地理信息的方式。

　　　　　　　　　　　　選項：enableHighAccuracy:true/false:是否使用高精度

　　　　　　　　　　　　　　 timeout:設置超時時間，單位ms

maximumAge:能夠設置瀏覽器從新獲取地理信息的 時間間隔， 單位是ms

　　　　　　　　方法2：watchPosition(success， [error]， option)：循環監聽用戶的地理信息。

　　　　　　　　方法3：clearWatch()：清除用戶信息監聽實例。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .de{
            width: 300px;
            height: 300px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="demo" class="de"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            /* /!*option:能夠設置獲取數據的方式
            * enableHighAccuracy:true/false:是否使用高精度
            * timeout:設置超時時間，單位ms
            * maximumAge:能夠設置瀏覽器從新獲取地理信息的時間間隔，單位是ms*!/ */
            navigator.geolocation.getCurrentPosition(showPosition,showError,{
                enableHighAccuracy:true,    //使用高精度
                timeout:3000    //超時時間設置3s
            });
        }
        else{
            x.innerHTML="Geolocation is not supported by this browser.";
        }
    }
    /* 成功獲取定位以後的回調
    若是獲取地理信息成功，會將獲取到的地理信息傳遞給成功以後的回調 */
    // position.coords.latitude 緯度
    // position.coords.longitude 經度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
    function showPosition(position)
    {
        x.innerHTML="Latitude: " + position.coords.latitude +
                "<br />Longitude: " + position.coords.longitude;
    }
    // 獲取定位失敗以後的回調
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML="The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="An unknown error occurred."
                break;
        }
    }
    getLocation();
</script>

　　第三方地圖接口使用：

　　在須要地圖功能時，咱們考慮使用第三方平臺(百度地圖或其餘的第三方接口)

　　步驟：打開百度地圖首頁--->地圖開放平臺(底部)--->開發文檔，而後能夠着手嘗試了。(要申請受權碼)

　　舉例：普通地圖和全景圖

<head>
    <title>普通地圖&全景圖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 此處的ak就是咱們申請的祕鑰 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script>
    <style type="text/css">
        body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
        #panorama {height: 50%;overflow: hidden;}
        #normal_map {height:50%;overflow: hidden;}
    </style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
    //全景圖展現
    var panorama = new BMap.Panorama('panorama');
    panorama.setPosition(new BMap.Point(116.404125,39.91405)); //根據經緯度座標展現全景圖
    panorama.setPov({heading: -40, pitch: 6});

    panorama.addEventListener('position_changed', function(e){ //全景圖位置改變後，普通地圖中心點也隨之改變
        var pos = panorama.getPosition();
        map.setCenter(new BMap.Point(pos.lng, pos.lat));
        marker.setPosition(pos);
    });
    //普通地圖展現
    var mapOption = {
        mapType: BMAP_NORMAL_MAP,
        maxZoom: 18,
        drawMargin:0,
        enableFulltimeSpotClick: true,
        enableHighResolution:true
    }
    var map = new BMap.Map("normal_map", mapOption);
    var testpoint = new BMap.Point(116.404125,39.91405);
    map.centerAndZoom(testpoint, 18);
    var marker=new BMap.Marker(testpoint);
    marker.enableDragging();
    map.addOverlay(marker);
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.MapTypeControl());
    marker.addEventListener('dragend',function(e){
        panorama.setPosition(e.point); //拖動marker後，全景圖位置也隨着改變
        panorama.setPov({heading: -40, pitch: 6});}
    );
</script>
</body>