使用JavaScript实现手机的震动

HTML5 herman 3533浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

记得去年的CSDN专家社区活动,有创业者透露,他们正在实现用js脚本就可以开发智能硬件的插件。例如通过他们的插件,我们使用js脚本就可以实现会夹菜的机器人,会呼叫主人的门禁系统等。我们看到JavaScript正在走向更宽广的舞台。今天为大家分享的是使用JavaScript实现手机的震动功能。
先看看W3C官方基于JavaScript的震动接口
vibrate震动
window.navigator对象里就只有一个关于振动的API:vibrate方法。在使用调用方法前,我们先验证一下你的浏览器是否支持该接口!

var supportsVibrate = "vibrate" in navigator;
if(supportsVibrate)
    alert("支持");
else
    alert("不支持");

不同内核的浏览器我带上不同的前缀。navigator.vibratenavigator.webkitVibratenavigator.oVibrate
    
navigator.vibrate函数可以接受一个数字参数,也可以接受一个数字数组,当使用数组参数时,奇数位的数值是震动秒数,偶数位为等待秒数。

// 振动1秒
navigator.vibrate(1000);
// 业余草:www.xttblog.com
// 振动多次
// 参数分别是震动3秒,等待2秒,然后振动1秒
navigator.vibrate([3000, 2000, 1000]);

停止震动,你只需要向navigator.vibrate方法里传入0,或一个空数组:
// 停止振动
navigator.vibrate(0);
navigator.vibrate([]);

对navigator.vibrate方法的调用并不会引起手机循环振动;当参数是一个数字时,振动之后发生一次,然后就停止下来。当参数是数组时,震动会按数组里的值震动,然后就停止振动。如果想实现持续震动,我们可以使用setInterval和clearInterval方法产生让手机持续震动。

var vibrateInterval;

// 业余草:www.xttblog.com
function startVibrate(duration) {
    navigator.vibrate(duration);
}

// 业余草:www.xttblog.com
function stopVibrate() {
    // Clear interval and stop persistent vibrating 
    if(vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}

// 业余草:www.xttblog.com
function startPeristentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

参考资料:
https://www.w3.org/TR/vibration/

版权声明:本文为博主原创文章,未经博主允许不得转载。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用JavaScript实现手机的震动