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 相关文章推荐
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
浅谈JavaScript 声明提升
Sep 14 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模板类代码
2008/09/07 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
javascript事件问题
2009/09/05 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
jsTree使用记录实例
2016/12/01 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
Win8下python3.5.1安装教程
2020/07/29 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python实现PID算法及测试的例子
2019/08/08 Python
基于python的列表list和集合set操作
2019/11/24 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
面试后感谢信
2014/02/01 职场文书
节能减耗标语
2014/06/21 职场文书
起诉书格式范文
2015/05/20 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python