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实战_读书笔记2 选择器
Jan 22 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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调用Google translate_tts api实现代码
2013/08/07 PHP
php目录操作实例代码
2014/02/21 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
教师应聘个人求职信
2013/12/10 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
司机岗位职责范本
2015/04/10 职场文书