<template>
<div class="clock">
<!-- 线 -->
<hr style="width:350px;position:absolute;top:368px;right:0;">
<!-- 时 -->
<ul class="hour" :style="{transform:'rotate('+hourDeg+'deg)'}">
<li style="transform:rotate(0deg);"><div>一时</div></li>
<li style="transform:rotate(-15deg);"><div>二时</div></li>
<li style="transform:rotate(-30deg);"><div>三时</div></li>
<li style="transform:rotate(-45deg);"><div>四时</div></li>
<li style="transform:rotate(-60deg);"><div>五时</div></li>
<li style="transform:rotate(-75deg);"><div>六时</div></li>
<li style="transform:rotate(-90deg);"><div>七时</div></li>
<li style="transform:rotate(-105deg);"><div>八时</div></li>
<li style="transform:rotate(-120deg);"><div>九时</div></li>
<li style="transform:rotate(-135deg);"><div>十时</div></li>
<li style="transform:rotate(-150deg);"><div>十一时</div></li>
<li style="transform:rotate(-165deg);"><div>十二时</div></li>
<li style="transform:rotate(-180deg);"><div>十三时</div></li>
<li style="transform:rotate(-195deg);"><div>十四时</div></li>
<li style="transform:rotate(-210deg);"><div>十五时</div></li>
<li style="transform:rotate(-225deg);"><div>十六时</div></li>
<li style="transform:rotate(-240deg);"><div>十七时</div></li>
<li style="transform:rotate(-255deg);"><div>十八时</div></li>
<li style="transform:rotate(-270deg);"><div>十九时</div></li>
<li style="transform:rotate(-285deg);"><div>二十时</div></li>
<li style="transform:rotate(-300deg);"><div>二十一时</div></li>
<li style="transform:rotate(-315deg);"><div>二十二时</div></li>
<li style="transform:rotate(-330deg);"><div>二十三时</div></li>
<li style="transform:rotate(-345deg);"><div>二十四时</div></li>
</ul>
<!-- 分 -->
<ul class="minute" :style="{transform:'rotate('+minuteDeg+'deg)'}">
<li style="transform:rotate(0deg);"><div>一分</div></li>
<li style="transform:rotate(-6deg);"><div>二分</div></li>
<li style="transform:rotate(-12deg);"><div>三分</div></li>
<li style="transform:rotate(-18deg);"><div>四分</div></li>
<li style="transform:rotate(-24deg);"><div>五分</div></li>
<li style="transform:rotate(-30deg);"><div>六分</div></li>
<li style="transform:rotate(-36deg);"><div>七分</div></li>
<li style="transform:rotate(-42deg);"><div>八分</div></li>
<li style="transform:rotate(-48deg);"><div>九分</div></li>
<li style="transform:rotate(-54deg);"><div>十分</div></li>
<li style="transform:rotate(-60deg);"><div>十一分</div></li>
<li style="transform:rotate(-66deg);"><div>十二分</div></li>
<li style="transform:rotate(-72deg);"><div>十三分</div></li>
<li style="transform:rotate(-78deg);"><div>十四分</div></li>
<li style="transform:rotate(-84deg);"><div>十五分</div></li>
<li style="transform:rotate(-90deg);"><div>十六分</div></li>
<li style="transform:rotate(-96deg);"><div>十七分</div></li>
<li style="transform:rotate(-102deg);"><div>十八分</div></li>
<li style="transform:rotate(-108deg);"><div>十九分</div></li>
<li style="transform:rotate(-114deg);"><div>二十分</div></li>
<li style="transform:rotate(-120deg);"><div>二十一分</div></li>
<li style="transform:rotate(-126deg);"><div>二十二分</div></li>
<li style="transform:rotate(-132deg);"><div>二十三分</div></li>
<li style="transform:rotate(-138deg);"><div>二十四分</div></li>
<li style="transform:rotate(-144deg);"><div>二十五分</div></li>
<li style="transform:rotate(-150deg);"><div>二十六分</div></li>
<li style="transform:rotate(-156deg);"><div>二十七分</div></li>
<li style="transform:rotate(-162deg);"><div>二十八分</div></li>
<li style="transform:rotate(-168deg);"><div>二十九分</div></li>
<li style="transform:rotate(-174deg);"><div>三十分</div></li>
<li style="transform:rotate(-180deg);"><div>三十一分</div></li>
<li style="transform:rotate(-186deg);"><div>三十二分</div></li>
<li style="transform:rotate(-192deg);"><div>三十三分</div></li>
<li style="transform:rotate(-198deg);"><div>三十四分</div></li>
<li style="transform:rotate(-204deg);"><div>三十五分</div></li>
<li style="transform:rotate(-210deg);"><div>三十六分</div></li>
<li style="transform:rotate(-216deg);"><div>三十七分</div></li>
<li style="transform:rotate(-222deg);"><div>三十八分</div></li>
<li style="transform:rotate(-228deg);"><div>三十九分</div></li>
<li style="transform:rotate(-234deg);"><div>四十分</div></li>
<li style="transform:rotate(-240deg);"><div>四十一分</div></li>
<li style="transform:rotate(-246deg);"><div>四十二分</div></li>
<li style="transform:rotate(-252deg);"><div>四十三分</div></li>
<li style="transform:rotate(-258deg);"><div>四十四分</div></li>
<li style="transform:rotate(-264deg);"><div>四十五分</div></li>
<li style="transform:rotate(-270deg);"><div>四十六分</div></li>
<li style="transform:rotate(-276deg);"><div>四十七分</div></li>
<li style="transform:rotate(-282deg);"><div>四十八分</div></li>
<li style="transform:rotate(-288deg);"><div>四十九分</div></li>
<li style="transform:rotate(-294deg);"><div>五十分</div></li>
<li style="transform:rotate(-300deg);"><div>五十一分</div></li>
<li style="transform:rotate(-306deg);"><div>五十二分</div></li>
<li style="transform:rotate(-312deg);"><div>五十三分</div></li>
<li style="transform:rotate(-318deg);"><div>五十四分</div></li>
<li style="transform:rotate(-324deg);"><div>五十五分</div></li>
<li style="transform:rotate(-330deg);"><div>五十六分</div></li>
<li style="transform:rotate(-336deg);"><div>五十七分</div></li>
<li style="transform:rotate(-342deg);"><div>五十八分</div></li>
<li style="transform:rotate(-348deg);"><div>五十九分</div></li>
<li style="transform:rotate(-354deg);"><div>六十分</div></li>
</ul>
<!-- 秒 -->
<ul class="second" :style="{transform:'rotate('+secondDeg+'deg)'}">
<li style="transform:rotate(0deg);"><div>一秒</div></li>
<li style="transform:rotate(-6deg);"><div>二秒</div></li>
<li style="transform:rotate(-12deg);"><div>三秒</div></li>
<li style="transform:rotate(-18deg);"><div>四秒</div></li>
<li style="transform:rotate(-24deg);"><div>五秒</div></li>
<li style="transform:rotate(-30deg);"><div>六秒</div></li>
<li style="transform:rotate(-36deg);"><div>七秒</div></li>
<li style="transform:rotate(-42deg);"><div>八秒</div></li>
<li style="transform:rotate(-48deg);"><div>九秒</div></li>
<li style="transform:rotate(-54deg);"><div>十秒</div></li>
<li style="transform:rotate(-60deg);"><div>十一秒</div></li>
<li style="transform:rotate(-66deg);"><div>十二秒</div></li>
<li style="transform:rotate(-72deg);"><div>十三秒</div></li>
<li style="transform:rotate(-78deg);"><div>十四秒</div></li>
<li style="transform:rotate(-84deg);"><div>十五秒</div></li>
<li style="transform:rotate(-90deg);"><div>十六秒</div></li>
<li style="transform:rotate(-96deg);"><div>十七秒</div></li>
<li style="transform:rotate(-102deg);"><div>十八秒</div></li>
<li style="transform:rotate(-108deg);"><div>十九秒</div></li>
<li style="transform:rotate(-114deg);"><div>二十秒</div></li>
<li style="transform:rotate(-120deg);"><div>二十一秒</div></li>
<li style="transform:rotate(-126deg);"><div>二十二秒</div></li>
<li style="transform:rotate(-132deg);"><div>二十三秒</div></li>
<li style="transform:rotate(-138deg);"><div>二十四秒</div></li>
<li style="transform:rotate(-144deg);"><div>二十五秒</div></li>
<li style="transform:rotate(-150deg);"><div>二十六秒</div></li>
<li style="transform:rotate(-156deg);"><div>二十七秒</div></li>
<li style="transform:rotate(-162deg);"><div>二十八秒</div></li>
<li style="transform:rotate(-168deg);"><div>二十九秒</div></li>
<li style="transform:rotate(-174deg);"><div>三十秒</div></li>
<li style="transform:rotate(-180deg);"><div>三十一秒</div></li>
<li style="transform:rotate(-186deg);"><div>三十二秒</div></li>
<li style="transform:rotate(-192deg);"><div>三十三秒</div></li>
<li style="transform:rotate(-198deg);"><div>三十四秒</div></li>
<li style="transform:rotate(-204deg);"><div>三十五秒</div></li>
<li style="transform:rotate(-210deg);"><div>三十六秒</div></li>
<li style="transform:rotate(-216deg);"><div>三十七秒</div></li>
<li style="transform:rotate(-222deg);"><div>三十八秒</div></li>
<li style="transform:rotate(-228deg);"><div>三十九秒</div></li>
<li style="transform:rotate(-234deg);"><div>四十秒</div></li>
<li style="transform:rotate(-240deg);"><div>四十一秒</div></li>
<li style="transform:rotate(-246deg);"><div>四十二秒</div></li>
<li style="transform:rotate(-252deg);"><div>四十三秒</div></li>
<li style="transform:rotate(-258deg);"><div>四十四秒</div></li>
<li style="transform:rotate(-264deg);"><div>四十五秒</div></li>
<li style="transform:rotate(-270deg);"><div>四十六秒</div></li>
<li style="transform:rotate(-276deg);"><div>四十七秒</div></li>
<li style="transform:rotate(-282deg);"><div>四十八秒</div></li>
<li style="transform:rotate(-288deg);"><div>四十九秒</div></li>
<li style="transform:rotate(-294deg);"><div>五十秒</div></li>
<li style="transform:rotate(-300deg);"><div>五十一秒</div></li>
<li style="transform:rotate(-306deg);"><div>五十二秒</div></li>
<li style="transform:rotate(-312deg);"><div>五十三秒</div></li>
<li style="transform:rotate(-318deg);"><div>五十四秒</div></li>
<li style="transform:rotate(-324deg);"><div>五十五秒</div></li>
<li style="transform:rotate(-330deg);"><div>五十六秒</div></li>
<li style="transform:rotate(-336deg);"><div>五十七秒</div></li>
<li style="transform:rotate(-342deg);"><div>五十八秒</div></li>
<li style="transform:rotate(-348deg);"><div>五十九秒</div></li>
<li style="transform:rotate(-354deg);"><div>六十秒</div></li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
hourDeg:0,
minuteDeg:0,
secondDeg:0,
nowTime:""
}
},
beforeDestroy() {
clearInterval(this.nowTime);
},
mounted(){
this.nowTime = setInterval(() => this.init(), 1000);
},
methods:{
init(){
let nowtime = new Date();
let year = nowtime.getFullYear() + "";
let month = nowtime.getMonth() + 1 + "";
let date = nowtime.getDate() + "";
let hours = nowtime.getHours() + "";
if (hours < 10) {
hours = 0 + hours;
}
let minute = nowtime.getMinutes() + "";
if (minute < 10) {
minute = 0 + minute;
}
let second = nowtime.getSeconds() + "";
if (second < 10) {
second = 0 + second;
}
if(hours==0) {
this.hourDeg= 0
}else if(hours==1){
this.hourDeg= 0
}else if(hours==2){
this.hourDeg= 15
}else if(hours==3){
this.hourDeg= 30
}else if(hours==4){
this.hourDeg= 45
}else if(hours==5){
this.hourDeg= 60
}else if(hours==6){
this.hourDeg= 75
}else if(hours==7){
this.hourDeg= 90
}else if(hours==8){
this.hourDeg= 105
}else if(hours==9){
this.hourDeg= 120
}else if(hours==10){
this.hourDeg= 135
}else if(hours==11){
this.hourDeg= 165
}else if(hours==12){
this.hourDeg= 180
}else if(hours==13){
this.hourDeg= 195
}else if(hours==14){
this.hourDeg= 210
}else if(hours==15){
this.hourDeg= 225
}else if(hours==16){
this.hourDeg= 240
}else if(hours==17){
this.hourDeg= 240
}else if(hours==18){
this.hourDeg= 255
}else if(hours==19){
this.hourDeg= 270
}else if(hours==20){
this.hourDeg= 285
}else if(hours==21){
this.hourDeg= 300
}else if(hours==22){
this.hourDeg= 315
}else if(hours==23){
this.hourDeg= 330
}else{
this.hourDeg= 345
}
if(minute==0) {
this.minuteDeg= 0
}else if(minute==1){
this.minuteDeg= 0
}else if(minute==2){
this.minuteDeg= 6
}else if(minute==3){
this.minuteDeg= 12
}else if(minute==4){
this.minuteDeg= 18
}else if(minute==5){
this.minuteDeg= 24
}else if(minute==6){
this.minuteDeg= 30
}else if(minute==7){
this.minuteDeg= 36
}else if(minute==8){
this.minuteDeg= 42
}else if(minute==9){
this.minuteDeg= 48
}else if(minute==10){
this.minuteDeg= 54
}else if(minute==11){
this.minuteDeg= 60
}else if(minute==12){
this.minuteDeg= 66
}else if(minute==13){
this.minuteDeg= 72
}else if(minute==14){
this.minuteDeg= 78
}else if(minute==15){
this.minuteDeg= 84
}else if(minute==16){
this.minuteDeg= 90
}else if(minute==17){
this.minuteDeg= 96
}else if(minute==18){
this.minuteDeg= 102
}else if(minute==19){
this.minuteDeg= 108
}else if(minute==20){
this.minuteDeg= 114
}else if(minute==21){
this.minuteDeg= 120
}else if(minute==22){
this.minuteDeg= 126
}else if(minute==23){
this.minuteDeg= 132
}else if(minute==24){
this.minuteDeg= 138
}else if(minute==25){
this.minuteDeg= 144
}else if(minute==26){
this.minuteDeg= 150
}else if(minute==27){
this.minuteDeg= 156
}else if(minute==28){
this.minuteDeg= 162
}else if(minute==29){
this.minuteDeg= 168
}else if(minute==30){
this.minuteDeg= 174
}else if(minute==31){
this.minuteDeg= 180
}else if(minute==32){
this.minuteDeg= 186
}else if(minute==33){
this.minuteDeg= 192
}else if(minute==34){
this.minuteDeg= 198
}else if(minute==35){
this.minuteDeg= 204
}else if(minute==36){
this.minuteDeg= 210
}else if(minute==37){
this.minuteDeg= 216
}else if(minute==38){
this.minuteDeg= 222
}else if(minute==39){
this.minuteDeg= 228
}else if(minute==40){
this.minuteDeg= 234
}else if(minute==41){
this.minuteDeg= 240
}else if(minute==42){
this.minuteDeg= 246
}else if(minute==43){
this.minuteDeg= 252
}else if(minute==44){
this.minuteDeg= 258
}else if(minute==45){
this.minuteDeg= 264
}else if(minute==46){
this.minuteDeg= 270
}else if(minute==47){
this.minuteDeg= 276
}else if(minute==48){
this.minuteDeg= 282
}else if(minute==49){
this.minuteDeg= 288
}else if(minute==50){
this.minuteDeg= 294
}else if(minute==51){
this.minuteDeg= 300
}else if(minute==52){
this.minuteDeg= 306
}else if(minute==53){
this.minuteDeg= 312
}else if(minute==54){
this.minuteDeg= 318
}else if(minute==55){
this.minuteDeg= 324
}else if(minute==56){
this.minuteDeg= 330
}else if(minute==57){
this.minuteDeg= 336
}else if(minute==58){
this.minuteDeg= 342
}else if(minute==59){
this.minuteDeg= 348
}
if(second==0) {
this.secondDeg= 0
}else if(second==1){
this.secondDeg= 0
}else if(second==2){
this.secondDeg= 6
}else if(second==3){
this.secondDeg= 12
}else if(second==4){
this.secondDeg= 18
}else if(second==5){
this.secondDeg= 24
}else if(second==6){
this.secondDeg= 30
}else if(second==7){
this.secondDeg= 36
}else if(second==8){
this.secondDeg= 42
}else if(second==9){
this.secondDeg= 48
}else if(second==10){
this.secondDeg= 54
}else if(second==11){
this.secondDeg= 60
}else if(second==12){
this.secondDeg= 66
}else if(second==13){
this.secondDeg= 72
}else if(second==14){
this.secondDeg= 78
}else if(second==15){
this.secondDeg= 84
}else if(second==16){
this.secondDeg= 90
}else if(second==17){
this.secondDeg= 96
}else if(second==18){
this.secondDeg= 102
}else if(second==19){
this.secondDeg= 108
}else if(second==20){
this.secondDeg= 114
}else if(second==21){
this.secondDeg= 120
}else if(second==22){
this.secondDeg= 126
}else if(second==23){
this.secondDeg= 132
}else if(second==24){
this.secondDeg= 138
}else if(second==25){
this.secondDeg= 144
}else if(second==26){
this.secondDeg= 150
}else if(second==27){
this.secondDeg= 156
}else if(second==28){
this.secondDeg= 162
}else if(second==29){
this.secondDeg= 168
}else if(second==30){
this.secondDeg= 174
}else if(second==31){
this.secondDeg= 180
}else if(second==32){
this.secondDeg= 186
}else if(second==33){
this.secondDeg= 192
}else if(second==34){
this.secondDeg= 198
}else if(second==35){
this.secondDeg= 204
}else if(second==36){
this.secondDeg= 210
}else if(second==37){
this.secondDeg= 216
}else if(second==38){
this.secondDeg= 222
}else if(second==39){
this.secondDeg= 228
}else if(second==40){
this.secondDeg= 234
}else if(second==41){
this.secondDeg= 240
}else if(second==42){
this.secondDeg= 246
}else if(second==43){
this.secondDeg= 252
}else if(second==44){
this.secondDeg= 258
}else if(second==45){
this.secondDeg= 264
}else if(second==46){
this.secondDeg= 270
}else if(second==47){
this.secondDeg= 276
}else if(second==48){
this.secondDeg= 282
}else if(second==49){
this.secondDeg= 288
}else if(second==50){
this.secondDeg= 294
}else if(second==51){
this.secondDeg= 300
}else if(second==52){
this.secondDeg= 306
}else if(second==53){
this.secondDeg= 312
}else if(second==54){
this.secondDeg= 318
}else if(second==55){
this.secondDeg= 324
}else if(second==56){
this.secondDeg= 330
}else if(second==57){
this.secondDeg= 336
}else if(second==58){
this.secondDeg= 342
}else if(second==59){
this.secondDeg= 348
}
}
}
}
</script>
<style scoped lang="scss">
.clock{
width:700px;
height:700px;
margin: 100px auto;
position: relative;
clear: both;
padding:0;
}
ul,li{
list-style: none;
}
.hour{
position: absolute;
width:320px;
height:20px;
top:340px;
left:190px;
padding:0;
li{
position: absolute;
width:100%;
right:0;
top:0;
div{
float:right;
width:90px;
text-align: right;
}
}
}
.minute{
position: absolute;
width:520px;
height:20px;
top:340px;
left:90px;
padding:0;
li{
position: absolute;
width:100%;
right:0;
top:0;
div{
float:right;
width:90px;
text-align: right;
}
}
}
.second{
position: absolute;
width:680px;
height:20px;
top:340px;
left:10px;
padding:0;
li{
position: absolute;
width:100%;
right:0;
top:0;
div{
float:right;
width:90px;
text-align: right;
}
}
}
</style>
简
易效果图：
来源：CSDN
作者：weixin_42598901
链接：https://blog.csdn.net/weixin_42598901/article/details/103679773