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 相关文章推荐
js借助ActiveXObject实现创建文件
Sep 29 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 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中SSO Cookie登录分析和实现
2015/11/06 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php实现微信模板消息推送
2018/03/30 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
Node.js事件驱动
2015/06/18 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Python3 合并二叉树的实现
2019/09/30 Python
八年级历史教学反思
2014/01/10 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
教师年度考核评语
2014/04/28 职场文书
企业宣传标语
2014/06/09 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
出售房屋委托书范本
2014/09/24 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
人大代表选举标语
2014/10/07 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
刑事附带民事起诉状
2015/05/19 职场文书