html圆盘钟表纯js有解释【搬代码】

以下是一个使用纯JavaScript创建HTML圆盘仪表的示例代码。这个示例提供了一个简单的圆盘仪表，可以显示时间，并且会随着时间的变化更新。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clock</title>
<style>
  .clock {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 50px auto;
    border: 10px solid #333;
    border-radius: 50%;
    background-color: #f0f0f0;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  }
 
  .clock .plate {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 50%;
    background-color: #444;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  }
 
  .clock .dial {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 2;
    border-radius: 50%;
    background-color: #f0f0f0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  }
 
  .hand {
    width: 2px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform-origin: 50% -100px;
    transition: all 0.05s;
    z-index: 3;
  }
 
  .hand.hour {
    background: #333;
  }
 
  .hand.minute {
    background: #f00;
  }
 
  .hand.second {
    background: #ff0;
  }
</style>
</head>
<body>
<div class="clock">
  <div class="plate"></div>
  <div class="dial"></div>
  <div class="hand hour"></div>
  <div class="hand minute"></div>
  <div class="hand second"></div>
</div>
 
<script>
function rotateElement(element, angle) {
  element.style.transform = 'rotate(' + angle + 'deg)';
}
 
function updateClock() {
  var now = new Date();
  var seconds = now.getSeconds();
  var minutes = now.getMinutes() + seconds / 60;
  var hours = (now.getHours() % 12) + minutes / 60;
  
  rotateElement(secondHand, seconds * 6);
  rotateElement(minuteHand, minutes * 6);
  rotateElement(hourHand, hours * 30);
}
 
var secondHand = document.querySelector('.hand.second');
var minuteHand = document.querySelector('.hand.minute');
var hourHand = document.querySelector('.hand.hour');
 
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>

这段代码提供了一个简单的圆盘仪表，通过CSS给它添加样式，并通过JavaScript更新指针的位置以模拟时间的流逝。这个示例可以作为创建自己时钟应用的基础，并且可以根据需要进行扩展和定制。

html圆盘钟表纯js有解释【搬代码】

评论已关闭

推荐阅读