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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
社区(php&&mysql)三
2006/10/09 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
九步学会Python装饰器
2015/05/09 Python
Python切片操作实例分析
2018/03/16 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
《小石潭记》教学反思
2014/02/13 职场文书
党员公开承诺事项
2014/03/25 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
个人典型事迹材料
2014/12/30 职场文书