效果如图所示，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.hour{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
border: 3px solid #666666;display: inline-block}
.minute{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
border: 3px solid #666666;display: inline-block}
.second{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
border: 3px solid #666666;display: inline-block}
.innerLeft{height: 178px;width: 89px;position: absolute;top: 1px;left: 1px;border-radius: 178px 0 0 178px
;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-left: 10px solid #009bff;background: white
;transform-origin: 100% 50%;}
.innerRight{height: 178px;width: 89px;position: absolute;top: 1px;right: 1px;border-radius:0 178px 178px 0
;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-right: 10px solid #009bff;background: white;transform-origin: 0 50%;
transform: rotate(-180deg) ;}
.cover{position: absolute;height: 200px;width: 100px;border-radius: 198px 0 0 198px;background: white;z-index: 1}
input{position: absolute;top: 60px;left: 120px;}
span{height: 20px;width: 80px;line-height: 20px;display: block;position: absolute;;top: 90px;
z-index: 2; left: 60px;font-size: 16px;font-weight: bold;text-align: center}
</style>
</head>
<body>
<div class="hour">
<div class="innerLeft"></div>
<div class="cover"></div>
<div class="innerRight"></div>
<span></span>
</div>
<div class="minute">
<div class="innerLeft"></div>
<div class="cover"></div>
<div class="innerRight"></div>
<span></span>
</div>
<div class="second">
<div class="innerLeft"></div>
<div class="cover"></div>
<div class="innerRight"></div>
<span></span>
</div>
<script>
window.onload=function(){
function roll(progress,n) {
innerLeft = document.querySelector(‘.‘+this.className + ‘ .innerLeft‘);
innerRight = document.querySelector(‘.‘+this.className + ‘ .innerRight‘);
span = document.querySelector(‘.‘+this.className + ‘ span‘);
cover = document.querySelector(‘.‘+this.className + ‘ .cover‘);
span.innerHTML = progress+‘‘+this.className;
if (progress*n < 180) {
console.log(this.className);
cover.style.display = ‘block‘;
innerLeft.style.transform = ‘rotate(‘ + (progress*n) + "deg)";
innerRight.style.transform = ‘rotate(‘ + (progress*n - 180) + ‘deg)‘;
}
else{
console.log(this.className);
cover.style.display = ‘none‘;
innerLeft.style.transform = ‘rotate(‘ + (progress*n) + "deg)";
innerRight.style.transform = ‘rotate(0deg)‘;
}
}
var T=setInterval(function(){
var time=new Date();
var hours=time.getHours();
var minutes=time.getMinutes();
var seconds=time.getSeconds();
var hour=document.querySelector(‘.hour‘);
var minute=document.querySelector(‘.minute‘);
var second=document.querySelector(‘.second‘);
roll.call(hour,hours,30);
roll.call(minute,minutes,6);
roll.call(second,seconds,6);
},1000);
}
</script>
</body>
</html>
在编程过程中向使用tansform 来实现动态效果，但是会出现归零时逆向，最后就没有使用，接下来还是去探索一下吧。
时间： 2024-12-09 13:21:10