JavaScript手机振动API


Posted in Javascript onJune 11, 2016

很明显,这个API就是允许mobile程序员使用JavaScript调用手机的振动功能,并且能设定振动的方式和时长。
判断浏览器对振动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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
Javascript获取某个月的天数
May 30 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
gojs实现蚂蚁线动画效果
Feb 18 Javascript
JavaScript地理位置信息API
Jun 11 #Javascript
jQuery自定义数值抽奖活动代码
Jun 11 #Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 #Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 #Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
老生常谈JavaScript数组的用法
Jun 10 #Javascript
You might like
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP学习记录之数组函数
2018/06/01 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python实现按行切分文本文件的方法
2016/04/18 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python中的__slots__示例详解
2017/07/06 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
出纳岗位职责模板
2013/11/27 职场文书
初二生物教学反思
2014/02/03 职场文书
合作投资意向书
2014/04/01 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
工作推荐信范文
2014/05/10 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
通知函的格式
2015/04/27 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android