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中匿名函数的创建与调用方法分析
Dec 19 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
express如何使用session与cookie的方法
Jan 30 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 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.ini的路径的方法
2014/08/20 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
python读取Android permission文件
2013/11/01 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
中考学习决心书
2015/02/04 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android