JavaScript手机振动API


Posted in Javascript onJune 11, 2016

很明显,这个API就是允许mobile程序员使用JavaScript调用手机的振动功能,并且能设定振动的方式和时长。
判断浏览器对振动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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
JavaScript地理位置信息API
Jun 11 #Javascript
jQuery自定义数值抽奖活动代码
Jun 11 #Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 #Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 #Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
老生常谈JavaScript数组的用法
Jun 10 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
利用php生成验证码
2017/02/23 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
javascript比较文档位置
2008/04/08 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
教堂婚礼主持词
2014/03/14 职场文书
公司贷款承诺书
2014/05/30 职场文书
企业法人授权委托书
2014/09/25 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
客户答谢会致辞
2015/07/30 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Vue如何实现组件间通信
2021/05/15 Vue.js
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL