1. 全栈程序员必看首页

抖音网红简易时钟代码

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

抖音网红简易时钟代码<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


相关推荐

  • java中executeQuery()方法

    java中executeQuery()方法

    java中executeQuery()方法介绍使用 JDBC 连接数据库需要 4 步 executeQuery 方法是第四步执行查询 要用 statement 类的 executeQuery 方法来下达 select 指令以查询数据库 executeQuery 方法会把数据库响应的查询结果存放在 ResultSet 类对象中供我们使用 举例如下 Stringstr9 selectsnofro

    全栈程序员-站长的头像 全栈程序员-站长
    2025年7月11日
    0
  • C语言流水灯程序_51流水灯c语言程序

    C语言流水灯程序_51流水灯c语言程序

    C语言流水灯程序_51流水灯c语言程序0x01是数字，十六进制的数字。其结果等效于1。在数学上就是1，只不过在计算机上用2进制和十六进制较多，所以用十六进制表示。if(i&0x01)printf(＂奇数\n＂);elseprintf(＂偶数\n＂);system(＂pause＂);.0x01代表十六进制数也就是十进制数的01，&是把这些数转化为二进制数然后进行按位与运算info>>(…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年6月8日
    0
  • windows下github 出现Permission denied (publickey).解决方法

    windows下github 出现Permission denied (publickey).解决方法

    windows下github 出现Permission denied (publickey).解决方法

    全栈程序员-站长的头像 全栈程序员-站长
    2021年10月12日
    72
  • String类型数字与Integer最大值比较[通俗易懂]

    String类型数字与Integer最大值比较[通俗易懂]

    String类型数字与Integer最大值比较[通俗易懂]将String类型数字转为Integer类型时需要先判断范围是否超过Integer最大值，否则会报异常/***与最大值比较，大于返回1，等于返回0，小于返回-1*@paramval*@return*/publicintcomparetoMaxInt(Stringval){BigDecimalbd=newBigDecimal(val);BigDecimalmaxInt=ne

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月8日
    0
  • ios屏蔽ota更新描述文件(苹果软件更新怎么关闭)

    ios屏蔽ota更新描述文件(苹果软件更新怎么关闭)

    前言iOS手机下载新系统文件后，老是提示更新升级，确实很烦人，且为了防止手机被不小心给升级了，可以按照以下方法让手机显示当前版本为最高版本，不会下载升级包进行安装升级。操作步骤1、Safari浏览器中输入网址ibeta.me进入网页，选择最右侧屏蔽OTA更新，点击立即安装则会立即下载一个描述文件。2、进入手机设置->通用->描述文件选择tvOS13BetaSoftwareProfile，点击安装3、安装成功后，会提示重启手机，点击重启

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月11日
    200
  • 如何修改redis的端口号_redis配置文件详解

    如何修改redis的端口号_redis配置文件详解

    如何修改redis的端口号_redis配置文件详解redis修改默认端口的方法是：首先要先下载文件并解压编译及安装，安装好后全局启动并且设置密码，然后再修改端口号，最后指定运行配置即可【推荐课程：redis教程】(1)通过下面的链接进行下载，然后再用以下命令进行，解压，编译，安装下载地址：http://download.redis.io/redis-stable.tar.gztarxzfredis-4.0.9.tar.gzcdredis-4…

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

发表回复

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

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