程序员

几种不常用Web API(振动、重力感应、联网状态)

作者:admin 2021-06-11 我要评论

几种不常用Web API振动、重力感应、联网状态 内容介绍 一、vibrate振动 1、判断设备是否支持振动 2、单次震动 3、间接振动 4、停止振动 5、持续振动 二、deviceo...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

内容介绍

navigator对象中有一些不常用的API,以下主要介绍vibrate振动,deviceorientation重力感应和online联网状态。

一、vibrate振动

1、判断设备是否支持振动
// 判断设备是否支持振动(部分浏览器不支持)——vibrate
        var vibrateStatus = window.navigator.vibrate();
2、单次震动
// 单次震动200ms
        window.navigator.vibrate(200);
        window.navigator.vibrate([200]);
3、间接振动
// 间接振动(振动100ms,暂停200ms,继续振动300ms,暂停400ms...,奇数振动,偶数暂停)
        window.navigator.vibrate([100, 200, 300, 400]);
4、停止振动
// 停止振动(空白,[0]或数组全部为0)
        window.navigator.vibrate();
        window.navigator.vibrate([0]);
        window.navigator.vibrate([0, 0, 0]);
5、持续振动
// 持续振动(使用setInterval和clearInterval控制开始和停止)
        var vibrateInterval;

        function startVibrate(duration) {
            navigator.vibrate(duration);
        }

        function stopVibrate() {
            if (vibrateInterval) clearInterval(vibrateInterval);
            navigator.vibrate(0);
        }

        function startPeristentVibrate(duration, interval) {
            vibrateInterval = setInterval(function() {
                startVibrate(duration);
            }, interval);
        }

二、deviceorientation重力感应

// 重力感应方向输出——deviceorientation
        if (window.DeviceOrientationEvent) {
            window.addEventListener("deviceorientation", function(event) {
                // alpha: 在Z轴上的角度
                var rotateDegrees = event.alpha;
                // gamma: 从左到右
                var leftToRight = event.gamma;
                // beta: 从前到后的运动
                var frontToBack = event.beta;
                handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
            }, true);
        }
        var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
            // TODO
        };

三、online浏览器联网状态

1、获取当前联网状态
// 获取当前联网状态
        if (navigator.onLine) {
            alert('online')
        } else {
            alert('offline');
        }
2、监听联网变化状态
// 监听联网变化状态
        window.addEventListener("offline", function(e) {
            alert("offline");
        })
        window.addEventListener("online", function(e) {
            alert("online");
        })

注:
??部分浏览器不支持,注意兼容性


标签:javascript,navigator,振动,重力感应,联网状态


更多演示案例,查看 案例演示


欢迎评论留言!

;原文链接:https://blog.csdn.net/cainiaoyihao_/article/details/115514234

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Windows 10新增磁盘分析工具:文件夹占

    Windows 10新增磁盘分析工具:文件夹占

  • 鸿蒙HarmonyOS环境搭建遇到的坑,分享

    鸿蒙HarmonyOS环境搭建遇到的坑,分享

  • Zabbix5.2由浅入深系列之制作网络设备

    Zabbix5.2由浅入深系列之制作网络设备

  • 转手赚1000,开源抢茅台神器,真香!

    转手赚1000,开源抢茅台神器,真香!

腾讯云代理商
海外云服务器