h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

站长手记 作者: 2024-08-28 15:45:01
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件,利用devicemotion实现手机h5页面摇一摇功能

DeviceMotionEvent事件:

deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件。

原理:

利用devicemotion实现手机摇一摇

<script type="text/javascript">  
    var currhandle=0;//判断操作是否完成
    if(window.DeviceMotionEvent){
        var speed = 15;  
        var x = y = z = lastX = lastY = lastZ = 0;  
        window.addEventListener('devicemotion', function(){  
            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+10) {  
            	if(currhandle==0){
            		setbegin();//摇一摇事件触发后执行操作
            		currhandle=1;
            	}	
            }  
            lastX = x;  
            lastY = y;  
            lastZ = z;
        }, false);  
    }else{
    	console.log("您的设备不支持重力感应事件!")
    }
    function setbegin(){//开始操作
    	var color = new Array('#ff9', '#ff0', '#f00', '#000', '#00f', '#0ff');  
    	document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
    	currhandle=0;
    }     
</script>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70199.html