当前位置：首页 > 行业动态 > 正文

如何使用CSS3和JS实现动态时钟效果？

admin
行业动态
2025-01-23
3187

当然，以下是一个简单的 CSS3 和 JavaScript 动态时钟代码示例：，，“ html，，，，，，Dynamic Clock，， #clock {， font-family: 'Arial', sans-serif;， font-size: 48px;， text-align: center;， margin-top: 20%;， }，，，，，， function updateClock() {， const now = new Date();， const hours = String(now.getHours()).padStart(2, '0');， const minutes = String(now.getMinutes()).padStart(2, '0');， const seconds = String(now.getSeconds()).padStart(2, '0');， document.getElementById('clock').innerText = ${hours}:${minutes}:${seconds} ;， }， setInterval(updateClock, 1000);， updateClock(); // Initial call to display the clock immediately，，，，“，，这个代码创建了一个简单的网页，其中包含一个显示当前时间的时钟。CSS用于设置字体样式和对齐方式，JavaScript用于每秒更新一次时间。

一、HTML部分

1、创建容器：创建一个div作为时钟的外部容器，并设置类名为clock，在该容器内部，再创建一个div作为时钟的表盘，设置类名为clock-face，在表盘内分别创建三个div，代表时针、分针和秒针，设置类名分别为hand hour-hand、hand minute-hand和hand second-hand。

如何使用CSS3和JS实现动态时钟效果？第1张

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div >
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS部分

1、整体样式：设置页面的整体布局和背景颜色等，将页面设置为弹性盒子布局，使时钟水平和垂直居中显示，并设置背景颜色为浅灰色。

2、时钟样式：设置时钟的大小、边框、圆角和阴影效果，时钟的宽度和高度设置为300px，边框为20px的黑色实线，圆角为50%，并添加淡淡的阴影效果。

3、指针样式：统一设置时针、分针和秒针的基本样式，包括宽度、高度、背景颜色、位置、旋转中心和过渡效果，然后分别对时针、分针和秒针进行微调，如时针的高度稍长一些，颜色更深，分针的高度适中，颜色较深，秒针的高度最短，颜色为红色。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}
.clock {
    width: 300px;
    height: 300px;
    border: 20px solid black;
    border-radius: 50%;
    position: relative;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.clock-face {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateY(-3px); /* correction for border */
}
.hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand {
    height: 8px;
    background: #333;
}
.minute-hand {
    height: 6px;
    background: #666;
}
.second-hand {
    height: 4px;
    background: red;
}

三、JavaScript部分

1、获取元素：使用document.querySelector方法获取时针、分针和秒针的DOM元素。

2、计算角度并更新指针位置：定义一个setDate函数，该函数首先获取当前时间，然后根据当前时间的秒数、分钟数和小时数计算出时针、分针和秒针应该旋转的角度，通过设置元素的transform属性来更新指针的位置。

3、定时器：使用setInterval函数每秒调用一次setDate函数，使时钟能够实时更新。

const secondHand = document.querySelector('.second-hand');
const minuteHand = document.querySelector('.minute-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = ((seconds / 60) * 360) + 90;
    secondHand.style.transform =rotate(${secondsDegrees}deg);
    const minutes = now.getMinutes();
    const minutesDegrees = ((minutes / 60) * 360) + ((seconds/60)*6) + 90;
    minuteHand.style.transform =rotate(${minutesDegrees}deg);
    const hours = now.getHours();
    const hoursDegrees = ((hours / 12) * 360) + ((minutes/60)*30) + 90;
    hourHand.style.transform =rotate(${hoursDegrees}deg);
}
setInterval(setDate, 1000);
setDate();