html5传感器详解编程语言

html5传感器(注意苹果和安卓方向是相反的 回调函数触发的速度苹果要快很多 设置坐标不要设置在回调函数里)
以下是代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta http-equiv="Cache-Control" content="no-cache" / 
 title Title /title 
 

 /head 
 body 
x: div id="x" x /div 
y: div id="y" y /div 
z: div id="z" z /div 
speed: div id="speed" speed /div 
 script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" /script 
 script 
 $(function () {
 
 var shakeThreshold = 1000; // 定义一个摇动的阈值
 var lastUpdate = 0; // 记录上一次摇动的时间
 var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据
 

 // 监听传感器运动事件
 if (window.DeviceMotionEvent) {
 window.addEventListener(devicemotion, deviceMotionHandler, false);
 } else {
 alert(本设备不支持devicemotion事件);
 }
 

 // 运动传感器处理
 function deviceMotionHandler(eventData) {
 var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
 $(#x).text(acceleration.x);
 $(#y).text(acceleration.y);
 $(#z).text(acceleration.z);
 var curTime = new Date().getTime();
 

 // 100毫秒进行一次位置判断
 if ((curTime - lastUpdate) 100) {
 

 var diffTime = curTime - lastUpdate;
 lastUpdate = curTime;
 

 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 

 var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
 $(#speed).text(speed);
 // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作
 if (speed shakeThreshold) {
 alert(摇动了);
 }
 

 lastX = x;
 lastY = y;
 lastZ = z;
 }
 }
 })
 

 /script 
 /body 
 /html 

测试网址 可以观察x y z变化 http://newmiracle.cn/yaobai.html
ps 变化都是-10到10的变化 只要看整数就行 小数点不断的变化不用去鸟他

注意ios下 必须要https下 才能触发

18915.html