实现原生的时钟
<style>
#warp{
--scale-radius:300px;
background:red;
width:calc(var(--scale-radius) *2);
height:calc(var(--scale-radius) *2);
border-radius:100%;
position:relative;
margin:0 auto;
}
#warp *{
margin:0;
padding:0;
box-sizing:border-box;
}
/* 刻度 */
.scale{
--s-width:10px;
position:absolute;
top:0px;
height:calc(var(--scale-radius) *2 );
border-top:var(--s-width) solid #000;
border-bottom:var(--s-width) solid #000;
}
/* 每五分钟的刻度 */
.scale.f{
--f-width:5px;
width:var(--f-width);
left:calc(var(--scale-radius) - var(--f-width)/2)
}
/* 每分钟的刻度 */
.scale.o{
--o-width:2px;
width:var(--o-width);
left:calc(var(--scale-radius) - var(--o-width)/2);
}
/* 指针 */
.scales .pointer{
position:absolute;
background-size:100% 100%;
}
.scales .pointer.second{
--sec-width:2px;
--sec-height-rate:0.8;
--sec-height:calc((var(--scale-radius) * 2 - var(--scale-radius)/20) * var(--sec-height-rate));
--sec-top:calc((var(--scale-radius) * 2 - var(--sec-height)) / 2 );
width:var(--sec-width);
height:var(--sec-height);
top:var(--sec-top);
left:calc(var(--scale-radius) - var(--sec-width)/2);
border-top:5px #000 solid;
border-bottom:100px red solid;
background-color:#fff;
z-index:3;
}
.scales .pointer.minute{
--min-width:4px;
--min-height-rate:0.6;
--min-height:calc((var(--scale-radius) * 2 - var(--scale-radius)/20) * var(--min-height-rate) );
--min-top:calc((var(--scale-radius) * 2 - var(--min-height)) / 2 );
width:var(--min-width);
height:var(--min-height);
top:var(--min-top);
left:calc(var(--scale-radius) - var(--min-width) /2);
border-top:5px yellow solid;
border-bottom:100px red solid;
background-color:#fff;
z-index:2;
}
.scales .pointer.hour{
--hour-width:8px;
--hour-height-rate:0.4;
--hour-height:calc((var(--scale-radius) * 2 - var(--scale-radius)/20) * var(--hour-height-rate) );
--hour-top:calc((var(--scale-radius) * 2 - var(--hour-height)) / 2 );
width:var(--hour-width);
height:var(--hour-height);
top:var(--hour-top);
left:calc(var(--scale-radius) - var(--hour-width) /2);
border-top:5px yellow solid;
border-bottom:100px red solid;
background-color:#fff;
z-index:1;
}
</style>
注意事项
- 矩形的旋转中心是在左下角，调整宽度会向右偏移矩形宽度的一半，需要校正
<script>
const warp = $('#warp')
for(let i=0;i<30;i++){
let w = i%5===0?'f':'o'
$scale =
`
`;
warp.find('.scales').append($scale)
}
setInterval(()=>{
let t = new Date();
let second = t.getSeconds()===0?60:t.getSeconds();
let min = t.getMinutes();
let hour = t.getHours()
let secondRate = 6*second;
let minRate = 6*min;
let hourRate = 360/12*hour
console.log(hourRate)
// 0s 0deg
// 15s 90deg
// 30s 180deg
// 60s 360deg
$('.scales .second').css({'transform':`rotateZ(${secondRate}deg)`})
$('.scales .minute').css({'transform':`rotateZ(${minRate}deg)`})
$('.scales .hour').css({'transform':`rotateZ(${hourRate}deg)`})
},1000)
</script>