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 编写规范
Mar 03 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
vue使用element-ui按需引入
May 20 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
一段防盗连的PHP代码
2006/12/06 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
实例浅析js的this
2016/12/11 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python如何生成各种随机分布图
2018/08/27 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
珠宝店促销方案
2014/03/21 职场文书
骨干教师申报材料
2014/12/17 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL