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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
php use和include区别总结
2019/10/13 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
一看就懂得Python的math模块
2018/10/21 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
医药销售求职信范文
2014/02/01 职场文书
高考寄语大全
2014/04/08 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
会计稽核岗位职责
2015/04/13 职场文书
八年级物理教学反思
2016/02/19 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
基于Python实现nc批量转tif格式
2022/08/14 Python