html實現搖一搖並震動

　　今天收到了領導的通知，要APP和觸屏完成搖一搖的功能，本來通過IOS調用原生還是蠻方便的，但想如果采用web前端的方式應該是實現不了的，馬上就開始推脫了。可惜領導告知微信京東購物，不僅僅有搖一搖還有震動的功能，頓時就打臉了，下來后立即谷歌，查找代碼寫出demo，哈哈。

　　通過查找資料發現window.DeviceMotionEvent該事件可以監聽設備的運動事件，然后通過event.accelerationIncludingGravity可以獲取配置的x,y,z的位移，通過位置的變化計算設備是否在快速變化加速度以達到監聽設備是否在搖一搖的效果。然后就是navigator.vibrate(s)可以觸屏手機的震動功能。代碼如下

　　

var speed = 25; //定義搖一搖加速度的臨界值 
        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){
                    //手機震動1秒
                    if (navigator.vibrate) {
                        navigator.vibrate(1000);//震動秒數
                    }else if (navigator.webkitVibrate) {
                        navigator.webkitVibrate(1000);
                    }
　　　　　　　　　　　　alert("shaked");
                    //模擬網絡請求做想干的事
                    isHaveShaked = true;
                    setTimeout(function(){
                        isHaveShaked = false;
                        //.....                    
                    },2000);
                }
            }
            /*保存歷史加速度*/
            lastX = x;
            lastY = y;
            lastZ = z;
        }
        $(function() {
            init();
        });