JavaScript练习——模拟时钟

落凡尘༣

已于 2023-12-03 16:28:30 修改

阅读量244

点赞数 1

文章标签： javascript css css3

于 2023-11-19 14:38:29 首次发布

本文链接：https://blog.csdn.net/m0_65290003/article/details/134490189

版权

JavaScript练习——模拟时钟

一、展示效果

在这里插入图片描述

二、思路分析

1、将以下四张图片通过定位 ( 子绝父相 ) 的方式定位到生活中时钟的样子( clock是表盘、hour是时针、minute是分针、second是秒针 )，表盘使用相对定位( 即: position: relative ) ;三个针使用绝对定位 ( 即: position: absolute );
在这里插入图片描述
2、声明一个间歇函数让时钟按照 ( 每秒 / 度 ) 自动转动，再声明三个变量来定义 transform: rotate();，设置三个钟针旋转的度数。

三、实现步骤

1、设置CSS样式

div{
    width: 600px;
    height: 600px;
    margin: 50px;
}
div img.clock{
    width: 600px;
    height: 600px;
    position: relative;
}
div img.hour{
    position: absolute;
    left: 342px;
    top: 50px;
}
div img.minute{
    position: absolute;
    left: 342px;
    top: 50px;
}
div img.second{
    position: absolute;
    left: 342px;
    top: 50px;
} 
    @keyframes run {
    from {
    transform: rotate(0);
    }
    to {
    transform: rotate(360deg);
    }
}

2、使用document.querySelector来获取HTML页面中的类名（“.hour”, “.minute”, “.second”）元素。

let hour = document.querySelector(".hour");
      let minute = document.querySelector(".minute");
      let second = document.querySelector(".second");

3、使用setInterval函数每秒更新一次时间，并且通过改变CSS的transform: rotate属性旋转相应的元素来表示时间的变化。

setInterval(function () {
        let date = new Date();

        let ms = date.getMilliseconds();
        let s = date.getSeconds() + ms / 1000;
        let m = date.getMinutes() + s / 60;
        let h = (date.getHours() % 12) + m / 60;

        second.style.transform = `rotate(${s * 6}deg)`;
        minute.style.transform = `rotate(${m * 6}deg)`;
        hour.style.transform = `rotate(${h * 30}deg)`;
      }, 1000);

四、完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    div{
    width: 600px;
    height: 600px;
    margin: 50px;
}
div img.clock{
    width: 600px;
    height: 600px;
    position: relative;
}
div img.hour{
    position: absolute;
    left: 342px;
    top: 50px;
}
div img.minute{
    position: absolute;
    left: 342px;
    top: 50px;
}
div img.second{
    position: absolute;
    left: 342px;
    top: 50px;
} 
    @keyframes run {
    from {
    transform: rotate(0);
    }
    to {
    transform: rotate(360deg);
    }
}
    </style>
  </head>
  <body>
    <div>
      <img class="clock" src="./images/clock.jpg" alt="" />
      <img class="hour" src="./images/hour.png" alt="" />
      <img class="minute" src="./images/minute.png" alt="" />
      <img class="second" src="./images/second.png" alt="" />
    </div>
    <script>
      let hour = document.querySelector(".hour");
      let minute = document.querySelector(".minute");
      let second = document.querySelector(".second");

      setInterval(function () {
        let date = new Date();

        let ms = date.getMilliseconds();
        let s = date.getSeconds() + ms / 1000;
        let m = date.getMinutes() + s / 60;
        let h = (date.getHours() % 12) + m / 60;

        second.style.transform = `rotate(${s * 6}deg)`;
        minute.style.transform = `rotate(${m * 6}deg)`;
        hour.style.transform = `rotate(${h * 30}deg)`;
      }, 1000);
    </script>
  </body>
</html>

落凡尘༣

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习——模拟时钟

1、将以下四张图片通过定位 ( 子绝父相 ) 的方式定位到生活中时钟的样子( clock是表盘、hour是时针、minute是分针、second是秒针 )，表盘使用相对定位( 即: position: relative );，三个针使用绝对定位 ( 即: position: absolute );2、声明一个间歇函数让时钟按照 ( 每秒 / 度 ) 自动转动，再声明三个变量来定义 transform: rotate();，设置三个钟针旋转的度数。
复制链接

扫一扫