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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP实现的策略模式示例
2019/03/20 PHP
jquery基础教程之数组使用详解
2014/03/10 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
使用Python来开发微信功能
2018/06/13 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python 的topk算法实例
2020/04/02 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
负责人任命书范本
2014/06/04 职场文书
理发店策划方案
2014/06/05 职场文书
跳蚤市场口号
2014/06/13 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
党性教育心得体会
2014/09/03 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python