抖音网红简易时钟代码

<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>