qq_42669510 2023-09-02 16:16 采纳率: 73.3%
浏览 2
已结题

JS时针旋转案例bug修改


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>练习 - 网页时钟</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .clock {
        width: 600px;
        height: 600px;
        background: url(./images/clock.jpg) no-repeat;
        margin: 50px auto 0;
        position: relative;
      }

      .hh,
      .mm,
      .ss {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: url(./images/hour.png) no-repeat center;
      }

      .mm {
        background-image: url(./images/minute.png);
        transform: rotate(270deg);
      }

      .ss {
        background-image: url(./images/second.png);
        transform: rotate(30deg);
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <div class="hh"></div>
      <div class="mm"></div>
      <div class="ss"></div>
    </div>
    <script>
      /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */

      //    角度换算： 公式复制即可
      //   小时角度公式：小时 * 30 + 分钟 / 60 * 30
      //   分钟角度公式：分钟* 6 + 秒 / 60 * 6
      //   秒角度公式： 当前秒数 * 6
      const hh = document.querySelector('.hh')
      const mm = document.querySelector('.mm')
      const ss = document.querySelector('.ss')
      setInterval(function () {
        const currentTime = Date.now() / 1000
        const s = Math.floor(currentTime % 60)
        const h = Math.floor(((currentTime / 3600) % 24) % 12)
        const m = Math.floor((currentTime / 60) % 60)
        ss.style.transform = `rotate(${s * 6}deg)`
        mm.style.transform = `rotate(${m * 6 + (s / 60) * 6}deg)`
        hh.style.transform = `rotate(${h * 30 + (m / 60) * 30}deg)`
      }, 1000)
    </script>
  </body>
</html>

为什么设置时针的角度不对？

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-09-02 18:50
    关注

    【以下回答由 GPT 生成】

    问题分析: 该问题是一个关于旋转时针的bug修复问题。代码中使用了CSS的transform属性来控制时针的旋转。时针的起始角度有些错误，需要进行修复。

    解决方案: 下面是修复bug的具体步骤：

    1. 打开代码编辑器，找到以下几行代码：
    .mm {
  background-image: url(./images/minute.png);
  transform: rotate(270deg);
}

.ss {
  background-image: url(./images/second.png);
  transform: rotate(30deg);
}
    1. 修改上述代码，将.mm和.ss的旋转角度修改为正确的角度。时针（.hh）的初始旋转角度是0度，分针（.mm）的初始旋转角度是0度，秒针（.ss）的初始旋转角度是0度。修改后的代码如下：
    .mm {
  background-image: url(./images/minute.png);
  transform: rotate(0deg);
}

.ss {
  background-image: url(./images/second.png);
  transform: rotate(0deg);
}
    1. 保存修改后的代码。

    修改后的代码应该如下所示：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>练习 - 网页时钟</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .clock {
        width: 600px;
        height: 600px;
        background: url(./images/clock.jpg) no-repeat;
        margin: 50px auto 0;
        position: relative;
      }

      .hh,
      .mm,
      .ss {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: url(./images/hour.png) no-repeat center;
      }

      .mm {
        background-image: url(./images/minute.png);
        transform: rotate(0deg);
      }

      .ss {
        background-image: url(./images/second.png);
        transform: rotate(0deg);
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <div class="hh"></div>
      <div class="mm"></div>
      <div class="ss"></div>
    </div>
  </body>
</html>

    这样修改后，时针、分针和秒针的起始角度就正确了，可以正确地旋转了。

    希望这个解决方案能够帮到你。如果你有任何其他问题，请随时提问。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 9月13日
  • 已采纳回答 9月5日
  • 创建了问题 9月2日

悬赏问题

  • ¥30 arduino vector defined in discarded section `.text' of wiring.c.o (symbol from plugin)
  • ¥20 关于#c++#的问题：(2）运算二叉树·表达式一般由一个运算符和两个操作数组成：（相关搜索：二叉树遍历）
  • ¥20 如何训练大模型在复杂因素组成的系统中求得最优解
  • ¥15 关于#r语言#的问题：在进行倾向性评分匹配时，使用“match it"包提示”错误于eval(family$initialize): y值必需满足0 <= y <= 1“请问在进行PSM时
  • ¥45 求17位带符号原码乘法器verilog代码
  • ¥20 PySide6扩展QLable实现Word一样的图片裁剪框
  • ¥15 matlab数据降噪处理，提高数据的可信度，确保峰值信号的不损失？
  • ¥15 怎么看我在bios每次修改的日志
  • ¥15 python+mysql图书管理系统
  • ¥15 Questasim Error: (vcom-13)