javascript实现手机震动API代码


Posted in Javascript onAugust 05, 2015

现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如 javascript地理位置信息API 。另外一个只针对手机应用的JavaScript API就是 振动(Vibration) API 。很明显,这个API就是允许mobile程序员使用JavaScript调用手机的振动功能,并且能设定振动的方式和时长。

javascript实现手机震动API代码

判断浏览器对振动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在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 #Javascript
JavaScript计算某一天是星期几的方法
Aug 05 #Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 #Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 #Javascript
JS+CSS实现表格高亮的方法
Aug 05 #Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 #Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
You might like
实用函数9
2007/11/08 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
javascript常用方法总结
2015/05/14 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python字符串的修改方法实例
2019/12/19 Python
Python pip配置国内源的方法
2020/02/14 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
大学生实习思想汇报
2014/01/12 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
公司离职证明标准范本
2014/10/05 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
委托书格式要求
2015/01/28 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
小学教师党员承诺书
2015/04/27 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server