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 相关文章推荐
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Vuex简单入门
Apr 19 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
JS如何操作DOM基于表格动态展示数据
Oct 15 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生成excel列序号代码实例
2013/12/24 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
php之可变变量的实例详解
2017/09/12 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
python实现名片管理系统项目
2019/04/26 Python
Python笔试面试题小结
2019/09/07 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
英语教学随笔感言
2014/02/20 职场文书
教师考核材料
2014/05/21 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL