抖音网红简易时钟代码

大家好，又见面了，我是你们的朋友全栈君。

<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{
this.hourDeg=(hours -1)*15
}
if(minute==0) {
this.minuteDeg= 0
}else if(minute==1){
this.minuteDeg= 0
}else {
this.minuteDeg = (minute-1)*6
}
if(second==0) {
this.secondDeg= 0
}else if(second==1){
this.secondDeg= 0
}else{
this.secondDeg = (second-1)*6 
}
}
}
}
</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>

简易效果图：