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 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
javascript实现计算器功能
Mar 30 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
摩卡咖啡
2021/03/03 咖啡文化
十大使用PHP框架的理由
2015/09/26 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
vue内置指令详解
2018/04/03 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
js中int和string数据类型互相转化实例
2019/01/16 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
建筑学推荐信
2013/11/03 职场文书
党员检讨书范文
2014/12/27 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书