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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 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解析json数据实例
2014/08/19 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python实现数值积分方式
2019/11/20 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python 星号(*)的多种用途
2020/09/21 Python
初一科学教学反思
2014/01/27 职场文书
奖励申请报告范文
2015/05/15 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL