H5进阶篇--实现微信摇一摇功能

在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。
而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

运动事件监听

if (window.DeviceMotionEvent) {window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {alert('你的手机太差了，买个新的吧。');
}

获取加速度信息
“摇一摇”的动作既“一定时间内设备了一定距离”，因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

 function deviceMotionHandler(eventData) {var acceleration = eventData.accelerationIncludingGravity;var curTime = new Date().getTime();if ((curTime - last_update) > 100) {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;var status = document.getElementById("status");if (speed > SHAKE_THRESHOLD) {doResult();}last_x = x;last_y = y;last_z = z;}}

效果如图所示：

H5进阶篇--实现微信摇一摇功能相关推荐

h5公众号调取微信扫一扫功能,处处都是坑~
1.安装weixinsdk npm install weixin-js-sdk 2.引入 import wx from "weixin-js-sdk"; 3.点击扫一扫获取微信签名 ...
JQ---h5页面上实现微信扫一扫功能
JQ-h5页面上实现微信扫一扫功能 1.引用jq和微信配置相关文件 <script src="../js/jquery.js"></script> < ...
微信摇一摇效果HTML,JavaScript+H5实现微信摇一摇功能
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对 ...
php微信摇一摇,怎样使用JS+H5实现微信摇一摇
这次给大家带来怎样使用JS+H5实现微信摇一摇,使用JS+H5实现微信摇一摇的注意事项有哪些,下面就是实战案例,一起来看一下. 项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动 ...
H5页面实现摇一摇（微信+APP内嵌入使用）
需求要求实现页面点击按钮摇一摇或者摇一摇手机触发抽奖. 页面会展示在微信小程序+APP中: 我在网络上找了一些方法,微信sdk中并未提供摇一摇的方法给H5页面调用,所以我采取以下方法: h5代码判断运 ...
微信——H5实现微信摇一摇
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对 ...
H5页面仿微信摇一摇及音频(安卓和苹果)
H5页面仿微信摇一摇,动作以及音频的知识点和代码,在Android和IOS的兼容问题测试环境:微信浏览器一.摇一摇: 1.知识点涉及事件DeviceMotionEvent,该事件返回设备有关于加 ...
vue.js中H5使用微信摇一摇抽奖，判断摇一摇次数
微信摇一摇抽奖: export default {data() {return {SHAKE_THRESHOLD:4000,//定义一个摇动的值last_update :0,//定义一个变量保存上次更 ...
微信摇一摇抽奖的H5制作思路
第一步微信授权登录,获取用户的微信信息,并写入数据库,相当于摇奖已经有了用户基础. 第二步页面出现一个手机摇动的CSS3动画,提示用户摇奖,每天可以设定摇奖交数,超过次数提醒用户分享好友,好友拉新 ...

H5进阶篇--实现微信摇一摇功能

H5进阶篇--实现微信摇一摇功能相关推荐

最新文章

热门文章