使用HTML，CSS，JavaScript制作简易时钟

最新推荐文章于 2024-05-30 17:19:59 发布

2201_75519003

最新推荐文章于 2024-05-30 17:19:59 发布

阅读量13

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/2201_75519003/article/details/134992539

版权

1.HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
  <div class="container">
    <!-- 时 -->
    <div id="h"></div>
    <!-- 分 -->
    <div id="m"></div>
    <!-- 秒 -->
    <div id="s"></div>
  </div>
  <script src="../js/index.js"></script>
</body>
</html>

2.样式部分

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
.container {
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: space-around;
  font-size: 32px;
  position: relative;
  background-image: url(../img/clock.jpg);
}
#h {
  width: 30px;
  height: 600px;
  position: absolute;
  top: 6px;
  left: 280px;
  background-image: url(../img/hour.png);
}
#m {
  width: 30px;
  height: 600px;
  position: absolute;
  top: 6px;
  left: 280px;
  background-image: url(../img/minute.png);
}

#s {
  width: 30px;
  height: 600px;
  position: absolute;
  top: 6px;
  left: 280px;
  background-image: url(../img/second.png);
}

3. JavaScript部分

window.onload = function () {
  var hdiv = document.getElementById('h')
  var mdiv = document.getElementById('m')
  var sdiv = document.getElementById('s')

  let timer = setInterval(go, 1000)
  go()
  function go() {
    let time = new Date()

    let m = time.getMinutes()
    let h = time.getHours() + m / 60
    let s = time.getSeconds()
    hdiv.style.transform = 'rotate(' + (h * 30) + 'deg)'
    mdiv.style.transform = 'rotate(' + (m * 6) + 'deg)'
    sdiv.style.transform = 'rotate(' + (s * 6) + 'deg)'
  }
}