zoukankan      html  css  js  c++  java
  • HTML5 重力感应效果,实现摇一摇效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no" />
        <title> HTML5 重力感应效果,实现摇一摇效果 </title>
        <style>
            html,body,div,ul,li{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            body{
                width:100%;
            }
            #box{
                width:90%;
                height:80px;
                background-color:orange;
                margin:0 auto;
                color:#fff;
                background-position: center -50px;
            }
        </style>
    </head>
    <body>
        
        <div id="box"></div>
    
    <script>
            //摇晃的力度
            var SHAKE_THRESHOLD = 2000;  
            var last_update = 0;  
            //初始化重力感应位置
            var x = y = z = last_x = last_y = last_z = 0;  
    
            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;   
                    last_x = x;  
                    last_y = y;  
                    last_z = z; 
    
                    //获取 X Y Z 的数值
                    document.getElementById('box').innerHTML = 'X:'+last_x+'<br> Y:'+last_y+'<br> Z:'+last_z; 
    
                    //如果速度大于摇晃的力度那么执行alert
                    if (speed > SHAKE_THRESHOLD) {  
                        alert('摇一摇');     
                    } 
                }  
            } 
            //判断是否支持重力感应
            if (window.DeviceMotionEvent) {  
                window.addEventListener('devicemotion', deviceMotionHandler, false);  
            } else {  
                alert('not support mobile event');  
            }  
    
    </script>
    </body>
    </html>
  • 相关阅读:
    3种方法实现CSS隐藏滚动条并可以滚动内容
    javascript 计算两个整数的百分比值
    使用watch监听路由变化和watch监听对象的实例
    springboot全局捕获异常
    使用 Java 创建聊天客户端-2
    使用 Java 创建聊天客户端-1
    使用 ServerSocket 建立聊天服务器-2
    使用 ServerSocket 建立聊天服务器-1
    ServerSocket
    scheduled定时任务+实例请求数据库
  • 原文地址:https://www.cnblogs.com/zion0707/p/4732081.html
Copyright © 2011-2022 走看看