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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
小程序实现上传视频功能
Aug 18 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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 第一节 php简介
2012/04/28 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jquery提示 "object expected"的解决方法
2009/12/13 Javascript
js Calender控件使用详解
2015/01/05 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python地震数据可视化详解
2019/06/18 Python
python flask中动态URL规则详解
2019/11/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python对文件的操作方法汇总
2020/02/28 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
介绍一下linux的文件系统
2012/03/20 面试题
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
特教教师先进事迹
2014/05/21 职场文书
生物工程专业求职信
2014/09/03 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript