3D 时钟：使用 HTML、CSS 和 JavaScript 创建一个独特的时钟

前端

2024-01-08 07:45:24

3D 时钟：使用 HTML、CSS 和 JavaScript 打造一个独特的时钟

在当今数字时代，时钟不仅仅是一种计时工具，更是一种时尚的装饰品，可以提升您的家居或工作空间。通过本文，我们将指导您使用 HTML、CSS 和 JavaScript 创建一个引人注目的 3D 时钟，为您的网站或个人项目增添互动和个性化元素。

先睹为快

废话不多说，先来看看最终效果：

[效果图]

项目结构

此项目基于 jQuery 框架，旨在简化编写过程。以下是整体框架代码：

<div id="clock">
  <div class="face">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</div>

实现原理

该时钟本质上是通过单个显示小时的手来实现的，而其他指针则是其副本。

代码分解

HTML

<div id="clock">
  <div class="face">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</div>

<div id="clock">：包含整个时钟的容器。
<div class="face">：时钟的表盘。
<div class="hour-hand">、<div class="minute-hand">、<div class="second-hand">：时钟的指针。

CSS

#clock {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hour-hand, .minute-hand, .second-hand {
  width: 10px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  background-color: black;
}

#clock：设置时钟的尺寸、边框、圆角和相对定位。
.face：设置时钟表盘的尺寸、定位和转换。
.hour-hand、.minute-hand、.second-hand：设置指针的尺寸、定位、转换、旋转和背景色。

JavaScript

$(function() {
  var clock = $('#clock'),
    face = clock.find('.face'),
    hourHand = face.find('.hour-hand'),
    minuteHand = face.find('.minute-hand'),
    secondHand = face.find('.second-hand');

  // 获取当前时间
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  // 设置指针的旋转角度
  hourHand.css('transform', 'rotate(' + (hours * 30 + minutes / 2) + 'deg)');
  minuteHand.css('transform', 'rotate(' + (minutes * 6 + seconds / 10) + 'deg)');
  secondHand.css('transform', 'rotate(' + (seconds * 6) + 'deg)');

  // 定时器每秒更新指针的位置
  setInterval(function() {
    now = new Date();
    hours = now.getHours();
    minutes = now.getMinutes();
    seconds = now.getSeconds();

    hourHand.css('transform', 'rotate(' + (hours * 30 + minutes / 2) + 'deg)');
    minuteHand.css('transform', 'rotate(' + (minutes * 6 + seconds / 10) + 'deg)');
    secondHand.css('transform', 'rotate(' + (seconds * 6) + 'deg)');
  }, 1000);
});