jQuery+CSS3网页时钟代码如何实现？-网页设计-锦华智联科技

纯数字显示：清晰易读。
CSS3 动画：数字切换时有平滑的翻转效果,视觉效果出色。
jQuery 控制：使用 jQuery 来更新时间,代码简洁。
响应式设计：可以适应不同屏幕尺寸。
代码结构清晰：HTML、CSS 和 JavaScript 分离,易于理解和修改。

最终效果预览

HTML 代码 (index.html)

这是时钟的基本结构，我们为每个时间单位（时、分、秒）都创建了一个容器，里面包含一个用于显示数字的 span。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS3 & jQuery 数字时钟</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="clock-container">
        <div class="time-block">
            <div class="time-segment" id="hours">
                <span class="digit">00</span>
            </div>
            <div class="separator">:</div>
            <div class="time-segment" id="minutes">
                <span class="digit">00</span>
            </div>
            <div class="separator">:</div>
            <div class="time-segment" id="seconds">
                <span class="digit">00</span>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (style.css)

这是样式表，负责时钟的外观和动画效果，核心是 CSS3 的 transform 和 transition 属性。

/* 全局样式和重置 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #222;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}
/* 时钟容器 */
.clock-container {
    text-align: center;
}
/* 时间块，包含时、分、秒 */
.time-block {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem; /* 基础字体大小 */
    letter-spacing: 0.1em;
}
/* 时间单位（时、分、秒）的容器 */
.time-segment {
    position: relative;
    display: inline-block;
    width: 1.2em; /* 为数字切换留出空间 */
    height: 1.2em; /* 与字体大小成比例 */
    overflow: hidden;
    margin: 0 0.1em;
}
/* 数字样式 */
.digit {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1.2em;
    text-align: center;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    /* 关键：设置过渡效果，让 transform 变化更平滑 */
    transition: transform 0.6s cubic-bezier(0.1, 0.7, 0.9, 0.1);
}
/* 数字翻转动画 */
.digit.flip {
    transform: rotateX(-180deg);
}
/* 分隔符样式 */
.separator {
    font-size: 5rem;
    color: #555;
    animation: blink 1s infinite;
}
/* 分隔符闪烁动画 */
@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0.3;
    }
}
/* 响应式设计：当屏幕宽度小于 600px 时 */
@media (max-width: 600px) {
    .time-block {
        font-size: 3.5rem;
    }
    .separator {
        font-size: 3.5rem;
    }
}

JavaScript (jQuery) 代码 (script.js)

这是时钟的大脑，使用 jQuery 来获取当前时间，并触发 CSS 动画。

$(document).ready(function() {
    // 定义一个函数来更新时钟
    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');
        // 为每个时间单位创建新的HTML字符串
        const newHoursHTML = `<span class="digit">${hours}</span>`;
        const newMinutesHTML = `<span class="digit">${minutes}</span>`;
        const newSecondsHTML = `<span class="digit">${seconds}</span>`;
        // 检查小时是否需要更新
        if ($('#hours .digit').html() !== hours) {
            $('#hours').html(newHoursHTML + '<span class="digit">' + $('#hours .digit').html() + '</span>');
            // 添加翻转动画类
            $('#hours .digit').last().addClass('flip');
        }
        // 检查分钟是否需要更新
        if ($('#minutes .digit').html() !== minutes) {
            $('#minutes').html(newMinutesHTML + '<span class="digit">' + $('#minutes .digit').html() + '</span>');
            $('#minutes .digit').last().addClass('flip');
        }
        // 检查秒钟是否需要更新
        if ($('#seconds .digit').html() !== seconds) {
            $('#seconds').html(newSecondsHTML + '<span class="digit">' + $('#seconds .digit').html() + '</span>');
            $('#seconds .digit').last().addClass('flip');
        }
    }
    // 立即执行一次，避免等待1秒
    updateClock();
    // 每秒更新一次时钟
    setInterval(updateClock, 1000);
});

代码逻辑详解 (特别是 JS 部分)

$(document).ready(function() { ... });

这是 jQuery 的标准写法，确保整个 HTML 文档加载完毕后，再执行内部的 JavaScript 代码。
（图片来源网络，侵删）
updateClock() 函数
- 这是核心函数,负责获取时间并更新显示。
- new Date(): 获取当前客户端的日期和时间对象。
- String(...).padStart(2, '0'): 这是一个非常实用的 JavaScript 方法，它可以将数字（如 7）转换成两位数的字符串（'07'）,确保时钟显示格式统一。
- $('#hours .digit').html() !== hours: 这是最关键的一步，它检查当前显示的数字是否与新的数字相同，只有不同时，我们才执行更新和动画,这可以避免不必要的动画和性能开销。
DOM 更新与动画
- $('#hours').html(newHoursHTML + '<span class="digit">' + ... + '</span>');: 这行代码是动画效果的关键。
  - 它并没有直接替换旧的 span。
  - 它先将新的数字 span 插入到容器 #hours 的前面。
  - 它保留了旧的数字 span。
  - 这样，在动画的瞬间,我们会看到两个数字重叠在一起。
- $('#hours .digit').last().addClass('flip');: 这行代码为刚刚插入的、位于顶层的数字添加了 .flip 类。
- 由于我们在 CSS 中为 .digit 元素设置了 transition: transform 0.6s;，添加 .flip 类会立即触发 transform: rotateX(-180deg) 的变化，而这个变化会以 0.6 秒的平滑动画完成,从而产生了翻转效果。
- 在下一次 updateClock 执行时，如果旧数字还在,它会被新数字替换掉。

如何使用

创建一个项目文件夹，clock。
在文件夹中创建三个文件：index.html、style.css 和 script.js。
将上面提供的代码分别复制到对应的文件中。
用浏览器打开 index.html 文件,即可看到效果。

这个时钟不仅功能完整，而且视觉效果现代化，是学习 jQuery 和 CSS3 动画的一个绝佳案例。