快捷導(dǎo)航

JS瀏覽器導(dǎo)航欄navigator的一些冷知識

更新時間：2023年12月15日 10:10:33 作者：初心不負(fù)

這篇文章主要為大家介紹了JS導(dǎo)航欄navigator的一些冷知識使用方法實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

監(jiān)聽屏幕旋轉(zhuǎn)變化接口: orientationchange

orientation.angle : 0 豎屏 , 90 向左橫屏 , -90/270 向右橫屏 , 180 倒屏

screenOrientation: function(){
    let self = this;
    let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        self.angle = orientation.angle;
    });
},

電池狀態(tài)：navigator.getBattery()

charging：是否充電

chargingTime：還需充電時間

dischargingTime：剩余電量

level：剩余電量百分?jǐn)?shù)

onchargingchange：監(jiān)聽充電狀態(tài)的改變 --可監(jiān)聽事件

onchargingtimechange：監(jiān)聽充電時間的改變 --可監(jiān)聽事件

ondischargingtimechange：監(jiān)聽電池可用時間的改變 --可監(jiān)聽事件

onlevelchange：監(jiān)聽剩余電量百分?jǐn)?shù)的改變 --可監(jiān)聽事件

getBatteryInfo: function(){
    let self = this;
    if(navigator.getBattery){
        navigator.getBattery().then(function(battery) {
            // 判斷是否在充電
            self.batteryInfo = battery.charging ? `在充電 : 剩余 ${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`;
            // 電池充電狀態(tài)改變事件
            battery.addEventListener('chargingchange', function(){
                self.batteryInfo = battery.charging ? `在充電 : 剩余 ${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`;
            });
        });
    }else{
        self.batteryInfo = '不支持電池狀態(tài)接口';
    }
},

讓你的手機震動: window.navigator.vibrate(200)

測試發(fā)現(xiàn)只有UC瀏覽器目前支持

vibrateFun: function(){
    let self = this;
    if( navigator.vibrate ){
        navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
    }else{
        self.vibrateInfo = "您的設(shè)備不支持震動";
    }
    <!--
    // 清除震動 
    navigator.vibrate(0);
    // 持續(xù)震動
    setInterval(function() {
        navigator.vibrate(200);
    }, 500);
    -->
},

當(dāng)前語言：navigator.language

getThisLang：function(){
    const langList = ['cn','hk','tw','en','fr'];
    const langListLen = langList.length;
    const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
    for( let i = 0; i < langListLen; i++ ){
        let lang = langList[i];
        if(thisLang.includes(lang)){
            return lang
        }else {
          return 'en'
        }
    }
}

//返回瀏覽器的內(nèi)部名稱
window.navigator.appCodeName 
//返回瀏覽器版本號
window.navigator.appVersion
//獲取設(shè)備的網(wǎng)絡(luò)連接信息
window.navigator.onLine
//返回用戶的位置信息
let geolocation = window.navigator.geolocation
{
    var watchID = navigator.geolocation.watchPosition(function(position) {
      do_something(position.coords.latitude, position.coords.longitude);
    });
}
//瀏覽器 UI 的語言
window.navigator.language
//表示網(wǎng)站訪客所使用的語言
window.navigator.languages
//MediaDevices 該對象可提供對相機和麥克風(fēng)等媒體輸入設(shè)備的連接訪問,也包括屏幕共享
var mediaDevices = window.navigator.mediaDevices;
mediaDevices.getUserMedia({ audio: true, video: true }).then(function (stream) {
}).catch(function (err) {
})

以上就是JS導(dǎo)航欄navigator的一些冷知識的詳細(xì)內(nèi)容，更多關(guān)于JS導(dǎo)航欄navigator的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: