您好,欢迎访问一九零五行业门户网

H5计算手机摇动次数

这次给大家带来h5计算手机摇动次数,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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
h5的window.postmessage与跨域
h5的多线程(worker sharedworker)使用详解
以上就是h5计算手机摇动次数的详细内容。
其它类似信息

推荐信息