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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
JQuery 常用操作代码
Mar 14 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
JavaScript表单验证开发
Nov 23 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
python常用函数详解
2016/09/13 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
numpy.where() 用法详解
2019/05/27 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Oracle的内存结构(Memory structures)
2015/06/10 面试题
后勤人员岗位职责
2013/12/17 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
我爱我家教学反思
2014/05/01 职场文书
党员领导干部承诺书
2014/05/28 职场文书
群众路线剖析材料
2014/09/30 职场文书
小学运动会报道稿
2014/10/04 职场文书
店面出租协议书范本
2014/11/28 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Go语言基础知识点介绍
2021/07/04 Golang