云打包技术文档

云打包技术文档是帮助客户更快、更好、更高效的使用云打包产品。云打包开发中心将一如既往秉着一颗开放的心态给开发者提供更多的帮助和巨大的支持,与开发者一起共同创造更加美好的移动互联网生态圈!

HTML5实现摇一摇的功能

浏览次数:

利用html5实现类似微信的手机摇一摇功能,并播放音乐。

1、  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

不多说直接上代码,

Javascript:


var SHAKE_THRESHOLD = 3000;  
        var last_update = 0;  
        var x = y = z = last_x = last_y = last_z = 0;  
        function init() {  
            if (window.DeviceMotionEvent) {  
                window.addEventListener('devicemotion', deviceMotionHandler, false);  
            } else {  
                alert('not support mobile event');  
            }  
        }  
        function deviceMotionHandler(eventData) {  
            var acceleration = eventData.accelerationIncludingGravity;  
            var curTime = new Date().getTime();  
            if ((curTime - last_update) > 100) {  
                var diffTime = curTime - last_update;  
                last_update = curTime;  
                x = acceleration.x;  
                y = acceleration.y;  
                z = acceleration.z;  
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;  
  
                if (speed > SHAKE_THRESHOLD) {  
                    alert("摇动了");  
                    media.setAttribute("src", "http://www.yundabao.cn/images/testmusic.mp3");  
                    media.load();  
                    media.play();    
                }  
                last_x = x;  
                last_y = y;  
                last_z = z;  
            }  
        }


HTML:


<!DOCTYPE html>  
  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>摇一摇功能</title>  
    <script type="text/javascript">  
        //Javascript  
    </script>  
</head>  
<body onload="init()">  
<p>用力摇一摇你手机</p>  
<audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://www.yundabao.cn/images/testmusic.mp3" autoplay="false">  
</audio>  
</body>  
</html>  


联系我们