案例：刻度时钟与数字时间_时钟刻度加数字-CSDN博客

本文链接：https://blog.csdn.net/Ghlys/article/details/128723123

该文章展示了如何使用HTML、CSS和JavaScript创建一个简单的时钟，时钟由刻度盘和电子时间组成，能实时显示北京时间。通过CSS设置元素样式和旋转角度模拟时钟面，用JavaScript的计时器功能动态更新时间，调整时针、分针和秒针的角度，使其保持与实际时间同步。

摘要由CSDN通过智能技术生成

需求：
上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时间实时对应。
实现原理：
1、利用元素圆角与宽高，位置，旋转角度制作一个时钟外表
2、设置计时器，更新获得的时间
3、将时钟圆盘分为12份后，每份30度，即每过一个小时的时间，时针元素旋转30度；
将得到的hour30再加上min和second转化为小时后乘以30度得到时针旋转角度
因为一小时包含60分钟，一分钟包含60秒，所以将时钟圆盘分为60份后，每份60度，即每过一个单位min或second的时间，分针与秒针元素旋转30度；
min60加上second转化为小时后乘以60度得到分针旋转角度
second*60即秒针旋转角度
实现代码：
HTML部分：

   <div id="color">
      <div id="cen"></div>
      <ul id="kedu">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
      </ul>
      <ul id=bigger>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
      <div id="h"></div>
      <div id="m"></div>
      <div id="s"></div>
      <div id="box"></div>
   </div>

CSS部分：

   <style>
      *{
         margin: 0;
         padding: 0;
         list-style: none;
      }
      body{
         background-color: rgb(112, 177, 121);
      }
      /* 表盘 */
      #color{
         width: 400px;
         height: 400px;
         margin: 150px auto;
         border: 10px solid rgb(71, 71, 71);
         border-radius: 50%;
      }
      /* 中心原点 */
      #cen{
          width: 20px;
          height: 20px;
         border-radius:50% ;
         background-color: rgb(71, 71, 71);
         position: absolute;
         top:340px;
         left:calc(50% - 10px) ;

      }
      /* 条形刻度 */
      #bigger{
         position: relative;
         margin: 0 auto;
      }
      #bigger li{
        width: 4px;
        height: 15px;
        position: absolute;
        top: 0;
        left:calc(50% - 2px);
        transform-origin: center 200px;
        background-color: rgb(85, 85, 85);
      }
      #bigger li:nth-child(1){
         transform:rotate(0deg);
      }
      #bigger li:nth-child(2){
         transform:rotate(30deg);
      }
      #bigger li:nth-child(3){
         transform:rotate(60deg);
      }
      #bigger li:nth-child(4){
         transform:rotate(90deg);
      }
      #bigger li:nth-child(5){
         transform:rotate(120deg);
      }
      #bigger li:nth-child(6){
         transform:rotate(150deg);
      }
      #bigger li:nth-child(7){
         transform:rotate(180deg);
      }
      #bigger li:nth-child(8){
         transform:rotate(210deg);
      }
      #bigger li:nth-child(9){
         transform:rotate(240deg);
      }
      #bigger li:nth-child(10){
         transform:rotate(270deg);
      }
      #bigger li:nth-child(11){
         transform:rotate(300deg);
      }
      #bigger li:nth-child(12){
         transform:rotate(330deg);
      }
      /* 数组刻度 */
      #kedu li{
        width: 4px;
        height: 15px;
        position: absolute;
        top: 178px;
        left:calc(50% - 4px);
        transform-origin: center 180px;
        
      }
      #kedu li:nth-child(1){
         transform:rotate(30deg);
      }
      #kedu li:nth-child(2){
         transform:rotate(60deg);
      }
      #kedu li:nth-child(3){
         transform:rotate(90deg);
      }
      #kedu li:nth-child(4){
         transform:rotate(119deg);
      }
      #kedu li:nth-child(5){
         transform:rotate(149deg);
      }
      #kedu li:nth-child(6){
         transform:rotate(179deg);
      }
      #kedu li:nth-child(7){
         transform:rotate(208deg);
      }
      #kedu li:nth-child(8){
         transform:rotate(238deg);
      }
      #kedu li:nth-child(9){
         transform:rotate(268deg);
      }
      #kedu li:nth-child(10){
         transform:rotate(296deg);
      }
      #kedu li:nth-child(11){
         transform:rotate(327deg);
      }
      #kedu li:nth-child(12){
         transform:rotate(359deg);
      }
      /* 时针圆盘 */
      #h,#m,#s{
         width: 250px;
         height: 250px;
         position: absolute;
         top: 225px;
         left: 619px;
      }
      /* 时针 */
      #h::before{
         content: "";
         position: absolute;
         top: 25px;
         left: calc(50% - 1px);
         width: 6px;
         height: 100px;
         background-color: rgb(46, 46, 46);
         z-index: 10;
         border-radius:5px;
      }
      /* 分针 */
      #m::before{
         content: "";
         position: absolute;
         top: 8px;
         left: calc(50% - 1px);
         width: 4px;
         height: 130px;
         background-color: rgb(102, 101, 101);
         z-index: 20;
         border-radius:5px;
      }
      /* 秒针 */
      #s::before{
         content: "";
         position: absolute;
         top: -15px;
         left: calc(50%);
         width: 2px;
         height: 160px;
         background-color: rgb(112, 20, 20);
         z-index: 30;
         border-radius:5px;
      }
      /* 数字时间 */
      #box{
         width: 400px;
         height: 50px;
         line-height: 50px;
         margin: 450px auto;
         border: 2px solid rgb(104, 104, 104);
         border-radius: 2px;
         background-color: rgb(177, 177, 177);
         font-size: 20px;
         text-align: center;
         font-weight: bold;
         color: rgb(38, 105, 41);
      }
   </style>

JS部分：

<script>
    setInterval(function(){
    //获取时间
      var time=new Date()    
    var h=time.getHours()   
    var m=time.getMinutes()
    var s=time.getSeconds()
    //时针旋转行为
    $("#h").css(`transform`,`rotate(${h*30+(m/60)*30+(s/60/60)*30}deg)`)
    $("#m").css(`transform`,`rotate(${m*6+(s/60)*6}deg`)
    $("#s").css(`transform`,`rotate(${s*6}deg)`)
    //数字时间
    box.innerHTML=`现在时间是:${h}时${m}分${s}秒`
    },1000)
   </script>

效果：