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();
        });

 

转载于:https://www.cnblogs.com/skyHF/p/4870899.html