自制简易html指南针

注意:

请在打开时面向北

代码:

html 复制代码
<!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>

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

相关推荐
yngsqq10 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk12 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan14 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE18 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年20 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能30 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房31 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂35 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7735 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js