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 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
countUp.js实现数字动态变化效果
Oct 17 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
js获取select标签选中值的两种方式
2014/01/09 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue--vuex详解
2019/04/15 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python MD5文件生成码
2009/01/12 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
《金钱的魔力》教学反思
2014/02/24 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党支部三会一课计划
2014/09/24 职场文书
中学生打架检讨书
2014/10/13 职场文书
个人年终总结范文
2015/03/09 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS