摇一摇事件封装了设备的运动传感器

微信活动页面经常有“摇一摇，拿好礼”，还有拼多多摇现金，摇一摇功能也非常常见。HTML5 提供的 devicemotion 事件封装了设备的运动传感器，提供设备的加速度，还提供设备自转速率。对设备运动状态进行判断，就可以实现“摇一摇”效果。

devicemotion 监听手机加速度变化的事件：

acceleration - 加速度
accelerationIncludingGravity - 重力加速度
rotationRate - 旋转速度
interval - 获取的时间间隔
摇一摇代码示例：

复制代码
var shake_threshold = 4000; //放一移动的干扰，设置一个临界值
/* 使用之前先检查浏览器是否支持 */
if(window.DeviceMotionEvent){
/* 添加事件 */
window.addEventListener('devicemotion',function(eventData){
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert("摇一摇成功了！"); // Do something
}
}
})
}
复制代码

摇一摇事件封装了设备的运动传感器相关推荐

H5进阶篇--实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
HTML5——监听手机的一些事件：手机加速度devicemotion、设备方向变化deviceorientation、手机摇一摇、指南针
1. devicemotion:监听手机加速度变化的事件(比如:手机疯狂摇摆) 属性:均为只读属性 (1)accelerationIncludingGravity:重力加速度(包括重心引力9.8) ( ...
H5监听摇一摇和手机倾斜事件（重力感应）
摇一摇功能(DeviceMotion) 摇一摇功能是很多原生APP都可以实现的功能,如微信中的摇一摇找好友,QQ音乐中的摇一摇换歌等.它们都是利用了手机加速传感器提供的API,当监听到手机加速变化的事 ...
利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (wi ...
php微信摇一摇开发文档,摇一摇事件通知
接口说明用户进入摇一摇界面,在"周边"页卡下摇一摇时,微信会把这个事件推送到开发者填写的URL(登录公众平台进入开发者中心设置).推送内容包含摇一摇时"周边" ...
微信摇一摇服务器实现,微信摇一摇事件通知
接口说明用户进入摇一摇界面,在"周边"页卡下摇一摇时,微信会把这个事件推送到开发者填写的URL(登录公众平台进入开发者中心设置).推送内容包含摇一摇时"周边" ...
摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...
html检测手机是否摇动,HTML5摇一摇（上）—如何判断设备摇动
刚刚过去的一道学数里屏.中近,期据面蔽最,近,期据面年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签&qu ...

摇一摇事件封装了设备的运动传感器

摇一摇事件封装了设备的运动传感器相关推荐

最新文章

热门文章