H5页面实现摇一摇并震动【花花教程】

<!--记住引用jQuery.js-->
<script> var speed = 10; //定义摇一摇加速度的临界值 值越小摇动的力度越小
var x = y = z = lastX = lastY = lastZ = 0; //初始化x,y,z上加速度的默认值
        var isHaveShaked = false;//用于记录是否在动画执行中
        function init() {
       //判断系统是否支持html5摇一摇的相关属性
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion', deviceMotionHandler, false);
            } else {
                alert('not support mobile event');
            }
        }
function deviceMotionHandler() {
            /*获取x,y,z方向的即时加速度*/
            var acceleration = event.accelerationIncludingGravity;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed
                || Math.abs(z - lastZ) > speed) {
                //摇一摇实际场景就是加速度的瞬间暴增爆减
                if (!isHaveShaked) {
                    alert(x);   //自己测试各坐标的值。。
                    alert(y)
                    alert(z);
                    //手机震动1秒
                    if (navigator.vibrate) {
                        navigator.vibrate(1000);//震动1000毫秒
                    } else if (navigator.webkitVibrate) {
                        navigator.webkitVibrate(1000);
                    }
                    //模拟网络请求做想干的事
                    isHaveShaked = true;
                    setTimeout(function () {
                        isHaveShaked = false;
                        //.....                    
                    }, 2000);
                }
            }
            /*保存历史加速度*/
            lastX = x;
            lastY = y;
            lastZ = z;
        }
        $(function () {
            init();
        });


</script>

最近一点时间都没有...

是啊，，，，，偶尔闲下来写写