JS浏览器导航栏navigator的一些冷知识

 更新时间:2023年12月15日 10:10:33   作者:初心不负  
这篇文章主要为大家介绍了JS导航栏navigator的一些冷知识使用方法实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

监听屏幕旋转变化接口: 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;
    });
},

电池状态:navigator.getBattery()

charging:是否充电

chargingTime:还需充电时间

dischargingTime:剩余电量

level:剩余电量百分数

onchargingchange:监听充电状态的改变 --可监听事件

onchargingtimechange:监听充电时间的改变 --可监听事件

ondischargingtimechange: 监听电池可用时间的改变 --可监听事件

onlevelchange:监听剩余电量百分数的改变 --可监听事件

getBatteryInfo: function(){
    let self = this;
    if(navigator.getBattery){
        navigator.getBattery().then(function(battery) {
            // 判断是否在充电
            self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
            // 电池充电状态改变事件
            battery.addEventListener('chargingchange', function(){
                self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
            });
        });
    }else{
        self.batteryInfo = '不支持电池状态接口';
    }
},

让你的手机震动: window.navigator.vibrate(200)

测试发现只有UC浏览器目前支持

vibrateFun: function(){
    let self = this;
    if( navigator.vibrate ){
        navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
    }else{
        self.vibrateInfo = "您的设备不支持震动";
    }
    <!--
    // 清除震动 
    navigator.vibrate(0);
    // 持续震动
    setInterval(function() {
        navigator.vibrate(200);
    }, 500);
    -->
},

当前语言: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'
        }
    }
}
//返回浏览器的内部名称
window.navigator.appCodeName 
//返回浏览器版本号
window.navigator.appVersion
//获取设备的网络连接信息
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
//表示网站访客所使用的语言
window.navigator.languages
//MediaDevices 该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享
var mediaDevices = window.navigator.mediaDevices;
mediaDevices.getUserMedia({ audio: true, video: true }).then(function (stream) {
}).catch(function (err) {
})

以上就是JS导航栏navigator的一些冷知识的详细内容,更多关于JS导航栏navigator的资料请关注脚本之家其它相关文章!

相关文章

  • 解决layui checkbox 提交多个值的问题

    解决layui checkbox 提交多个值的问题

    今天小编就为大家分享一篇解决layui checkbox 提交多个值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Driver.js前端引导页组件的具体使用

    Driver.js前端引导页组件的具体使用

    Driver.js是一个引导插件,本文主要介绍了Driver.js前端引导页组件的具体使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • JavaScript类型系统之基本数据类型与包装类型

    JavaScript类型系统之基本数据类型与包装类型

    javascript的数据类型可以分为两种:原始类型和引用类型,在此文给大家提到。本文主要给大家介绍javascript类型系统之基本数据类型与包装类型,涉及到js 基本类型 包装类相关知识,本文介绍的详细,具有参考借鉴价值,对本文感兴趣的朋友一起学习吧
    2016-01-01
  • 如何利用js实时监听input输入框值的变化

    如何利用js实时监听input输入框值的变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下
    2024-02-02
  • BootStrap Typeahead自动补全插件实例代码

    BootStrap Typeahead自动补全插件实例代码

    本文给大家介绍BootStrap Typeahead自动补全插件的实例代码,非常不错,具有参考借鉴价值,需要的朋友参考下
    2016-08-08
  • Javascript中从学习bind到实现bind的过程

    Javascript中从学习bind到实现bind的过程

    这篇文章主要介绍了Javascript中从学习bind到实现bind的过程,有兴趣的朋友跟着学习下吧。
    2018-01-01
  • 微信小程序之仿微信漂流瓶实例

    微信小程序之仿微信漂流瓶实例

    这篇文章主要介绍了微信小程序之仿微信漂流瓶实例,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • JavaScript异步编程中async函数详解

    JavaScript异步编程中async函数详解

    async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise
    2022-11-11
  • javascript实现左右控制无缝滚动

    javascript实现左右控制无缝滚动

    这篇文章主要介绍了javascript实现左右控制无缝滚动的方法及示例代码,需要的朋友可以参考下
    2014-12-12
  • js菜单代码js菜单特效代码

    js菜单代码js菜单特效代码

    不用div+css实现的js菜单特效代码用js+table实现 默认选中一个,点击后 选中的项目“变白”。不用css+div 高手给做一下 多谢了 演示站:www.allss.com.cn 演示站使用css+div的 改成js+table的
    2008-01-01

最新评论