自制简易html指南针_html 指北针-CSDN博客

注意:

请在打开时面向北

代码:

<!DOCTYPE html>
<html>
<head>
    <title>compass</title>
    <style type="text/css">
    html,body{
        margin: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #compass{ 
        width: 50vw;
        height: 50vw;
        transform-origin:center center; 
        border-radius: 50vw;
        overflow: hidden;
        border: 10px double #333;
    }
    .compass-inner{
        margin: auto;
        height: 100%;
        width: 10vw;
        position: relative;
    }
    .compass-inner::before{
        content: "";
        display: block;
        left: 0;
        top: 0;
        height: 0;
        width: 0;
        border: 25vw solid red;
        border-width: 0 5vw 25vw 5vw;
        border-color: transparent transparent red transparent;

    }
    .compass-inner::after{
        content: "";
        display: block;
        left: 0;
        bottom: 0;
        height: 0;
        width: 0;
        border: 25vw solid blue;
        border-width: 25vw 5vw 0 5vw;
        border-color: blue transparent transparent  transparent;

    }
    </style>
</head>
<body>
    <div id="compass">
        <div class="compass-inner"></div>
    </div>
    <script type="text/javascript">
var compass = document.getElementById('compass'); 

if(window.DeviceOrientationEvent) { 

    window.addEventListener('deviceorientation', function(event) {
        var alpha;
        if(event.webkitCompassHeading) { 
            //iOS
            alpha = event.webkitCompassHeading;

            compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)'; 

            show.innerHTML = alpha; 

        } else { 

            alpha = event.alpha; webkitAlpha = alpha; 

            if(!window.chrome) {

                webkitAlpha = alpha-270; 

            } 
        } 

        compass.style.Transform = 'rotate(' + alpha + 'deg)'; 

        compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)'; 

        compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 

    }, false); 

}else{ 

    document.querySelector('body').innerHTML = '浏览器不支持陀螺仪'; 

}        
    </script>
</body>
</html>

不要版权，不要版权，审核员注意