注意:
请在打开时面向北
代码:
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>不要版权，不要版权，审核员注意