H5计算手机摇动次数

1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

不多说直接上代码:

JavaScript：

var jsonObject=null;
 // 当页面加载完以后会执行window.onload
 window.onload = function() {
 var times = -1; // 记录摇动次数
 var last_time = 0;
 var borderSpeed = 800; // 加速度变化临界值
 var x = y = z = last_x = last_y = last_z = 0;
 if (window.DeviceMotionEvent) {
 window.addEventListener('devicemotion',shake,false);
 }
 else
 {
 alert('您的设备不支持摇一摇哦');
 }
 // 每次手机移动的时候都会执行下面shake函数的代码
 function shake(eventData)
 {
 var acceleration = eventData.accelerationIncludingGravity;
 var curTime = new Date().getTime();
 var diffTime = curTime-last_time;
 // 每隔100ms进行判断
 if (diffTime>100) {
 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>borderSpeed) {
 times++;
 document.getElementById("text").innerHTML=times+" times";
 // 用户的微信昵称和头像连接发送一次即可，不需要每次都发送
 if (times==0)
 {
 document.forms["insertForm"].headimg.value =img ;
 document.forms["insertForm"].user.value = nickname;
 }
 document.forms["insertForm"].time.value = times;
 }
 last_time = curTime;
 last_x = x;
 last_y = y;
 last_z = z;
 }
 }
 }

html：

<img src="hand.png">
<br/><font size="16" color="red" id="text"></font>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

H5的window.postMessage与跨域

H5的多线程（Worker SharedWorker）使用详解

谷吧美食网还为您提供以下相关内容希望对您有帮助：

极速竞赛（摇一摇赛车）：扫码进入都市风格赛车游戏界面，通过摇晃手机次数控制赛车速度，系统根据摇晃次数进行实时排名。切切乐（水果忍者升级版）：全员扫码后变身水果忍者，滑动屏幕疯狂切水果，系统根据切中水果数量计算分数，分数越高奖励越丰厚。带球过人：观众扫码后通过左右点击手机按钮控制角色带球前进，点击次数决定角

用户开启蓝牙后，摇动手机即可接收商家内容。核心优势：无需复杂操作，用户主动参与度高，且能精准覆盖门店周边潜在客户。案例效果：某餐饮火锅店在520活动期间，通过“摇一摇送优惠券”吸引超300人参与，摇动次数超2000次，发出优惠券近1000张，优惠券使用率达80%以上，公众号涨粉显著。2. 推送多元化服务，...

一、前端核心功能用户交互触发 前端通过微信内置的“摇一摇”手势识别功能（调用手机陀螺仪/加速度传感器）检测用户动作，当检测到符合条件的摇晃时，触发红包请求。界面展示摇动动画、倒计时提示等增强用户体验。两种形式的前端实现 关注公众号形式：用户发送预设关键词至公众号，前端跳转至H5红包页面，展示摇红...

方式2：公众号关注与H5互动 扫描二维码关注“红牛微服务”，接收活动推送并点击H5页面了解详情，参与抽奖。方式3：虚拟红牛冰镇分享 领取虚拟红牛并邀请好友冰镇，成功分享后领取奖励，通过微信生态实现裂变传播。防刷奖设计：后台控制单用户中奖次数上限（如5-10次），避免恶意刷奖。根据地域、时间等维度动态...

3. 微信助力分享活动，只要你分享给好友或朋友圈的被你好友再分享，累积到一定次数后即可得到你设置的礼物微信营销新玩法，通过这种病毒式的传播来推广产品或者活动。4. 个性化H5页面：通过制作各类好玩、有趣的H5页面来推广活动。5. 趣味微信小游戏：以围堵神经猫、疯狂数钱等小游戏为代表。