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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
jquery 插件开发备注
Aug 27 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
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
第八节--访问方式
2006/11/16 PHP
php读取msn上的用户信息类
2008/12/05 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python实现石头剪刀布游戏
2021/01/20 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
食品安全汇报材料
2014/08/18 职场文书
思想工作总结范文
2015/08/12 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技