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

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

相关推荐
小龙在山东33 分钟前
npm pnpm yarn 设置国内镜像
前端·npm·node.js
wuhen_n1 小时前
CSS元素动画篇:基于当前位置的变换动画(合集篇)
前端·css·html·css3·html5
专注VB编程开发20年2 小时前
JS检测htm哪个子节点的内容被修改addEventListener(‘input‘, (event)
前端·html5·js
凉生阿新2 小时前
【React】Hooks useReducer 详解,让状态管理更可预测、更高效
前端·react.js·前端框架
BillKu3 小时前
Vue3取消网络请求的方法(AbortController)
前端·javascript·vue.js
RIKI_14 小时前
【浅学】Windows下ffmpeg+nginx+flv将本地视频推流在本地搭建的Web前端页面中播放,超详细步骤
windows·nginx·ffmpeg·html
海天胜景4 小时前
c# list<T> 合并
前端·c#
陈奕昆5 小时前
【LLaMA-Factory实战】Web UI快速上手:可视化大模型微调全流程
前端·ui·llama·大模型微调实战
Jedi Hongbin6 小时前
echarts自定义图表--柱状图-横向
前端·javascript·echarts