这次给大家带来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计算手机摇动次数的详细内容。
