HTML5新增了一些JavaScript API接口,比如地理定位、重力感应等。今天主要介绍devicemotion事件(设备事件),它提供设备的加速信息,表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。
// 监听运动传感事件,查看是否支持硬件运动
if (window.DeviceMotionEvent) {
alert("您的设备支持硬件调用");
} else {
alert("您的设备不支持硬件调用");
}
window.addEventListener('devicemotion', deviceMotionHandler, false);
/*
* [deviceMotionHandler 摇一摇处理函数]
* @param {[type]} eventData [事件对象]
* @return {[type]} [无返回值]
* @author 刘国利、陈能堡、HTML5学堂
*/
function deviceMotionHandler(eventData){
// acceleration加速度
var acceleration = eventData.accelerationIncludingGravity;
$(".wrap")[0].innerHTML = acceleration.x + " " + acceleration.y + " " + acceleration.z;
}
// 获取当前时间
curTime = new Date().getTime();
if (curTime - lastTime > 100) {
// 计算出时间断
diffTime = curTime - lastTime;
// 记录上一次的时间
lastTime = curTime;
// 获取当前的三个方向的值
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
// 计算速度,为了防止出现负数,进行绝对值
speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);
// 记录上一次三个方向的值
lastX = x;
lastY = y;
lastZ = z;
};
if (speed > SHAKE_THRESHOLD) {
alert("实现了摇一摇");
};
图片来源于网络
var con = document.getElementById("con");
(function(){
// 监听运动传感事件,查看是否支持硬件运动
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert("您的设备不支持硬件调用");
}
// 变量初始化
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0,
curTime = 0,
lastTime = 0,
diffTime = 0,
speed = 0;
// 设置一个阀值
var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作
/*
* 功能:测算三个方向重力加速度,达到一定值进行相应操作
* 作者:HTML5学堂、刘国利、陈能堡
*
*/
function deviceMotionHandler(eventData){
var acceleration = eventData.accelerationIncludingGravity;
// 获取当前时间
curTime = new Date().getTime();
// 计算时间差,当这个差值大于一定值执行计算三个方向的速度
if ((curTime - lastTime) > 100) {
// 记录上一次的时间
diffTime = curTime - lastTime;
lastTime = curTime;
// 获取当前三个方向的值
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
// 计算速度,为了防止出现负数,进行绝对值
speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);
if (speed > SHAKE_THRESHOLD) {
alert("我实现摇一摇了");
};
// 记录上一次三个方向的值
lastX = x;
lastY = y;
lastZ = z;
};
}
})();