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.html深度分析
Mar 03 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 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进程同步代码实例
2015/02/12 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
运动会口号大全
2014/06/07 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2014年资料员工作总结
2014/11/18 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年财政所工作总结
2015/04/25 职场文书
《包身工》教学反思
2016/02/23 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers