1. 全栈程序员必看首页

抖音网红简易时钟代码

全栈程序员-站长 • • 未分类 • 阅读 42

抖音网红简易时钟代码<template><divclass=”clock”><!–线–><hrstyle=”width:350px;position:absolute;top:368px;right:0;”><!–时–><ulcl…

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

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

简抖音网红简易时钟代码易效果图：

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/154090.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • pandas.DataFrame()中的iloc和loc用法

    pandas.DataFrame()中的iloc和loc用法

    pandas.DataFrame()中的iloc和loc用法简单的说：iloc，即indexlocate用index索引进行定位，所以参数是整型，如：df.iloc[10:20,3:5]loc，则可以使用column名和index名进行定位，如：df.loc[‘image1’:‘image10’,‘age’:‘score’]实例：importnumpyasnpimportpandasaspdfrompandasimpo…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月21日
    3
  • mysql 截取字符串 并且按时间将数据分组

    mysql 截取字符串 并且按时间将数据分组

    mysql 截取字符串 并且按时间将数据分组数据库中保存的交易记录，需要按天和按小时分别展现出来，可使用sql语句直接分组selectDATE_FORMAT(newsalrecord.timeForOrd,’%Y%m%d’)days,count(payType)totaalcount,(SELECTsum((newsalwai.`Price`*newsalwai.`ODnumber`))FROMnewsalwai…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月10日
    44
  • Lotus Notes视图索引的机制

    Lotus Notes视图索引的机制

    Lotus Notes视图索引的机制
    内容提要:
    本文对视图的索引机制进行说明。包括：术语、索引的机制、视图索引的选项说明。
    说明
    视图索引的机制
    第1章概述
    本文档主要是对视图的索引机制进行说明。包括：术语、索引的机制、视图索引的选项说明。
    文档中用到的术语：
    更新(Refresh)：按F9可以刷新视图的索引。Refresh读视图的索引并刷新用户的屏幕。它不会重建视图的索引。
    重建(Rebuild)：按Shift+F9可以重建视图的索引。重建视

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月22日
    19
  • Java 程序员常用的开发工具 开发工具

    Java 程序员常用的开发工具

    Java 程序员常用的开发工具1、常用开发工具作为一名Java程序开发人员，可以的选择集成开发环境IDE（IntegratedDevelopmentEnvironment）非常多，得益于Java是一门开源语言。有开源免费的；有商用收费的。如何选择一款适合自己的集成开发环境，亦或说选择一款符合自己项目开发需要的集成开发环境。如果选择得当，那么就能够使得开发工作事半功倍；否则事倍而功半。 免费开源EclipseEclipse最…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月7日
    30
  • win10 系统WLAN不见了，win10找不到wifi选项的解决办法

    win10 系统WLAN不见了，win10找不到wifi选项的解决办法

    win10 系统WLAN不见了，win10找不到wifi选项的解决办法问题如下图所示：可以看到没有WLAN设置的选项而且是无网络的状态解决办法：两步就好了第一步，以管理员身份运行CMD点击Cortana输入cmd鼠标右键命令提示符以管理员身份运行还有一种办法就是进入C:\Windows\System32还是右键以管理员身份运行两种方法都可以第二步：使用netshwinsockreset…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月27日
    2
  • Gamma校正原理及python实现

    Gamma校正原理及python实现

    Gamma校正原理及python实现Gamma校正原理：　　假设图像中有一个像素，值是200，那么对这个像素进行校正必须执行如下步骤：　　1.归一化：将像素值转换为0～1之间的实数。算法如下:(i+0.5)/256这里包含1个除法和1个加法操作。对于像素A而言,其对应的归一化值为0.783203。　　2.预补偿：根据公式,求出像素归一化后的数…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月22日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号