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 颜色渐变效果的实现代码
Oct 01 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
详解AngularJS controller调用factory
May 19 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
微信小程序实现轮播图指示器
Jun 25 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
php中全局变量global的使用演示代码
2011/05/18 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
js断点调试经验分享
2017/12/08 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
简约控的天堂:The Undone
2016/12/21 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
致百米运动员广播稿
2014/01/29 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
护士在校生自荐信
2014/02/01 职场文书
益达广告词
2014/03/14 职场文书
读书活动总结范文
2014/04/26 职场文书
吨的认识教学反思
2014/04/27 职场文书
老人与海读书笔记
2015/06/26 职场文书
pt-archiver 主键自增
2022/04/26 MySQL