手机摇一摇（重力感应例子）

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
(function(){
    var lastX;//记录上一次x轴的位置
    var lastY;
    var lastZ;
    var maxRang = 80;//设置摇晃的幅度的最大值
    var minRang = 10;//设置代表摇晃结束的数值
    var isShake = false;//用户是否在摇晃
    window.addEventListener('devicemotion', function(e) {  //添加重力感应事件
        var motion = e.accelerationIncludingGravity;//重力感应参数
        var x = Math.round(motion.x);//记录x轴的数值并四舍五入小数
        var y = Math.round(motion.y);
        var z = Math.round(motion.z);
        if(typeof lastX == "undefined"){//如果没有上一次的x轴的位置
            lastX = x;//现在x轴的位置就为上一次x轴的位置
            lastY = y;
            lastZ = z;
            return;  //没有上一次的数值就不执行后面的函数了
        }
        var dis = Math.abs(x - lastX) + Math.abs(y - lastY) +
        Math.abs(z - lastZ);//判断摇晃的幅度，当前的xyz轴减去上一次的xyz轴的数值
        if(dis > maxRang) {//如果摇晃的幅度比设定的幅度大说明用户在摇晃手机
            isShake = true;//用户是在摇晃
        }
        if(dis < minRang && isShake) {  //如果dis比minRang小说明用户停止摇晃手机，并且曾经摇晃过手机
            isShake = false;  
            //执行 摇一摇之后，要操作的内容
            alert("您晃动了手机");
        }
        lastX = x;  //记录此时的xyz的数值为上一次的数值
        lastY = y;
        lastZ = z;
    });
})();
</script>
</body>
</html>

 

posted @ 2017-05-03 17:57  念念念不忘  阅读(309)  评论(0)    收藏  举报