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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
js获取select标签选中值的两种方式
2014/01/09 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python实现树形打印目录结构
2018/03/29 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python修改字典键(key)的方法
2019/08/05 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
自我评价的写作规则
2014/01/06 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
小学生安全责任书
2014/07/25 职场文书
2015年组织部工作总结
2015/04/03 职场文书
办公室岗位职责范本
2015/04/11 职场文书
校运会班级霸气口号
2015/12/24 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
oracle重置序列从0开始递增1
2022/02/28 Oracle
Redis基本数据类型String常用操作命令
2022/06/01 Redis
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL