javascript实现手机震动API代码


Posted in Javascript onAugust 05, 2015

现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如 javascript地理位置信息API 。另外一个只针对手机应用的JavaScript API就是 振动(Vibration) API 。很明显,这个API就是允许mobile程序员使用JavaScript调用手机的振动功能,并且能设定振动的方式和时长。

javascript实现手机震动API代码

判断浏览器对振动API的支持情况
一个好的习惯就是在使用之前要检查一下当前你的应用环境、浏览器是否支持振动API。下面就是检测的方法:

// Standards ftw!

var supportsVibrate = "vibrate" in navigator;

在 window.navigator 对象里就只有一个关于振动的API: vibrate 。

振动API基础应用
这个 navigator.vibrate 函数可以接受一个数字参数,也可以接受一个数字数组,当使用数组参数时,奇数位的数值是震动秒数,偶数位为等待秒数。

// 振动1秒

navigator.vibrate(1000);

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

如果想停止震动,你只需要向 navigator.vibrate 方法里传入0,或一个空数组:

// 停止振动

navigator.vibrate(0);

navigator.vibrate([]);

需要提醒的是,对 navigator.vibrate 方法的调用并不会引起手机循环振动;当参数是一个数字时,振动之后发生一次,然后就停止下来。当参数是数组时,震动会按数组里的值震动,然后就停止振动。

持续震动
我们可以简单的使用 setInterval 和 clearInterval 方法产生让手机持续震动的效果:

var vibrateInterval;
// Starts vibration at passed in level
function startVibrate(duration) {
navigator.vibrate(duration);
}
// Stops vibration
function stopVibrate() {
// Clear interval and stop persistent vibrating 
if(vibrateInterval) clearInterval(vibrateInterval);
navigator.vibrate(0);
}
// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
vibrateInterval = setInterval(function() {
startVibrate(duration);
}, interval);
}

上面的这段代码只是针对振动参数是一个数字的情况,如果参数是数组,你还需要计算一下它的总共持续时间,然后根据它的特征来进行循环。

使用振动(Vibration) API的场景
这个API显然是针对移动手机设备的。当开发手机WEB移动应用时,它是一个很好的警示工具,当在开发Web游戏或多媒体应用时,这个振动功能更是不可或缺的好技术。比如说,当用户在用一个手机玩你的WEB游戏时,当游戏中发生爆炸,而你让手机也跟随着振动,是不是一种很出色的用户体验?

你对这个JavaScript振动API的感觉如何?是认为它会很快流行起来?还是没有多大用处?

Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
javascript XML数据显示为HTML一例
Dec 23 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
JQuery实现图片轮播效果
May 08 jQuery
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 #Javascript
JavaScript计算某一天是星期几的方法
Aug 05 #Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 #Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 #Javascript
JS+CSS实现表格高亮的方法
Aug 05 #Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 #Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
You might like
PHP导入导出Excel代码
2015/07/07 PHP
thinkphp分页集成实例
2017/07/24 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
Position属性之relative用法
2015/12/14 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
pandas对指定列进行填充的方法
2018/04/11 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
仓库管理专业个人自我评价范文
2013/11/11 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js