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的资料请关注脚本之家其它相关文章!

相关文章

  • 利用HTML5的画布Canvas实现刮刮卡效果

    利用HTML5的画布Canvas实现刮刮卡效果

    大家都玩过刮刮乐吧,都想一夜暴富,本文给大家分享一款利用HTML5的画布Canvas实现刮刮卡效果,需要的朋友可以参考下
    2015-09-09
  • 一个简单的js树形菜单

    一个简单的js树形菜单

    说到树形菜单,貌似一般是用在一些管理系统里面的,我是还没有用到过,有些zTree之类的插件已经做得比较好了
    2011-12-12
  • JS实现淡入淡出图片效果的方法分析

    JS实现淡入淡出图片效果的方法分析

    这篇文章主要介绍了JS实现淡入淡出图片效果的方法,结合实例形式分析了js鼠标响应实现图片淡入淡出效果的原理与相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • javascript 内存模型实例详解

    javascript 内存模型实例详解

    这篇文章主要介绍了javascript 内存模型,结合实例形式详细分析了javascript 内存模型相关概念、原理、操作技巧与注意事项,需要的朋友可以参考下
    2020-04-04
  • JS如何使用剪贴板操作Clipboard API

    JS如何使用剪贴板操作Clipboard API

    浏览器允许JavaScript脚本读写剪贴板,自动复制或粘贴内容。一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。但是,有些时候这样做确实能够带来方便,比如"一键复制"功能,用户点击一下按钮,指定的内容就自动进入剪贴板。本文将介绍3种方法来实现。
    2021-05-05
  • BootStrap注意事项小结(五)表单

    BootStrap注意事项小结(五)表单

    这篇文章主要介绍了BootStrap注意事项小结(五)表单的相关资料,非常不错,具有参考借鉴价值,,需要的朋友可以参考下
    2017-03-03
  • 老生常谈遮罩层 滚动条的问题

    老生常谈遮罩层 滚动条的问题

    小编遇到的问题是在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法
    2016-04-04
  • 在JavaScript中遭遇级联表达式陷阱

    在JavaScript中遭遇级联表达式陷阱

    在JavaScript中遭遇级联表达式陷阱...
    2007-03-03
  • JavaScript自学笔记(必看篇)

    JavaScript自学笔记(必看篇)

    下面小编就为大家带来一篇JavaScript自学笔记(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript html5实现表单验证

    javascript html5实现表单验证

    这篇文章主要为大家详细介绍了javascript html5实现表单验证的具体代码,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论