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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
重置Redux的状态数据的方法实现
Nov 18 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
会话Bean的种类
2013/11/07 面试题
领导视察欢迎词
2014/01/15 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
文明家庭事迹材料
2014/12/20 职场文书
二手车转让协议书
2015/01/29 职场文书
怎样写辞职信
2015/02/27 职场文书
实习班主任自我评价
2015/03/11 职场文书
飞屋环游记观后感
2015/06/08 职场文书