自制简易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>

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

相关推荐
喜欢你,还有大家20 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在24 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi35 分钟前
Dokploy安装和部署项目流程
运维·前端
普通网友37 分钟前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢39 分钟前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_43 分钟前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端
龙在天1 小时前
我是前端,scss颜色函数你用过吗?
前端