AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

霓虹灯数字时钟（可复制源代码）

2024-10-06 694
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文展示了如何创建一个具有3D效果的霓虹灯数字时钟。通过HTML、CSS和JavaScript实现了一个动态更新时间的时钟，其中包含了字体定义、3D变换、过渡效果以及颜色动画等关键部分。最后提供了完整的代码供读者复制使用。

效果演示

640.gif

文末可一键复制完整代码

Code

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯数字时钟</title>
    <link rel="stylesheet" href="./127-霓虹灯数字时钟.css">
</head>
<body>
    <figure>
        <div class="face top">
            <p id="s"></p>
        </div>
        <div class="face front">
            <p id="m"></p>
        </div>
        <div class="face left">
            <p id="h"></p>
        </div>
    </figure>
</body>
<script src="./127-霓虹灯数字时钟.js"></script>
</html>
CSS
@font-face {
    font-family: 'Digital-7';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
    font-weight: normal;
    font-style: normal;
}
::selection {
    background: #333;
}
::-moz-selection {
    background: #111;
}
*,
html {
    margin: 0;
}
body {
    background: #333
}
figure {
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -105px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-35deg) rotateY(45deg);
    transform: rotateX(-35deg) rotateY(45deg);
    transition: 2s;
}
figure:hover {
    -webkit-transform: rotateX(-50deg) rotateY(45deg);
    transform: rotateX(-50deg) rotateY(45deg);
}
.face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-origin: center;
    transform-origin: center;
    background: #000;
    text-align: center;
}
p {
    font-size: 180px;
    font-family: 'Digital-7';
    margin-top: 20px;
    color: #2982FF;
    text-shadow: 0px 0px 5px #000;
    -webkit-animation: color 10s infinite;
    animation: color 10s infinite;
    line-height: 180px;
}
.front {
    -webkit-transform: translate3d(0, 0, 105px);
    transform: translate3d(0, 0, 105px);
    background: #111;
}
.left {
    -webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
    transform: rotateY(-90deg) translate3d(0, 0, 105px);
    background: #151515;
}
.top {
    -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
    transform: rotateX(90deg) translate3d(0, 0, 105px);
    background: #222;
}
@keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}
@-webkit-keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}
JavaScript
function date_time(id) {
        date = new Date;
        h = date.getHours();
        if (h < 10) {
                h = "0" + h;
        }
        m = date.getMinutes();
        if (m < 10) {
                m = "0" + m;
        }
        s = date.getSeconds();
        if (s < 10) {
                s = "0" + s;
        }
        document.getElementById("s").innerHTML = '' + s;
        document.getElementById("m").innerHTML = '' + m;
        document.getElementById("h").innerHTML = '' + h;
        setTimeout('date_time("' + "s" + '");', '1000');
        return true;
}
window.onload = date_time('s');

实现思路拆分

CSS 部分
@font-face {
    font-family: 'Digital-7';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
    font-weight: normal;
    font-style: normal;
}

定义数字时钟使用的字体。

::selection {
    background: #333;
}

设置文本选中时的背景颜色。

::-moz-selection {
    background: #111;
}

设置Mozilla浏览器中文本选中时的背景颜色。

*,
html {
    margin: 0;
}

重置默认的外边距。

body {
    background: #333;
}

设置页面背景颜色。

figure {
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -105px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-35deg) rotateY(45deg);
    transform: rotateX(-35deg) rotateY(45deg);
    transition: 2s;
}

定义时钟容器的样式，包括尺寸、位置、3D转换和过渡效果。

figure:hover {
    -webkit-transform: rotateX(-50deg) rotateY(45deg);
    transform: rotateX(-50deg) rotateY(45deg);
}

定义时钟容器悬停时的样式。

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-origin: center;
    transform-origin: center;
    background: #000;
    text-align: center;
}

定义时钟各个面的样式。

p {
    font-size: 180px;
    font-family: 'Digital-7';
    margin-top: 20px;
    color: #2982FF;
    text-shadow: 0px 0px 5px #000;
    -webkit-animation: color 10s infinite;
    animation: color 10s infinite;
    line-height: 180px;
}

定义时钟数字的样式，包括字体、颜色、阴影和动画。

.front {
    -webkit-transform: translate3d(0, 0, 105px);
    transform: translate3d(0, 0, 105px);
    background: #111;
}
.left {
    -webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
    transform: rotateY(-90deg) translate3d(0, 0, 105px);
    background: #151515;
}
.top {
    -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
    transform: rotateX(90deg) translate3d(0, 0, 105px);
    background: #222;
}

定义时钟各个面的具体样式，包括背景颜色和3D转换。

@keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}
@-webkit-keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}

定义霓虹灯颜色变化动画的关键帧。

JavaScript 部分
function date_time(id) {
        date = new Date;
        h = date.getHours();
        if (h < 10) {
                h = "0" + h;
        }
        m = date.getMinutes();
        if (m < 10) {
                m = "0" + m;
        }
        s = date.getSeconds();
        if (s < 10) {
                s = "0" + s;
        }
        document.getElementById("s").innerHTML = '' + s;
        document.getElementById("m").innerHTML = '' + m;
        document.getElementById("h").innerHTML = '' + h;
        setTimeout('date_time("' + "s" + '");', '1000');
        return true;
}
window.onload = date_time('s');

定义一个函数来获取当前时间并更新时钟的显示，设置页面加载完成时执行该函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯数字时钟</title>
    <style>
        @font-face {
            font-family: 'Digital-7';
            src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
            font-weight: normal;
            font-style: normal
        }

        ::selection {
            background: #333
        }

        ::-moz-selection {
            background: #111
        }

        *,
        html {
            margin: 0
        }

        body {
            background: #333
        }

        figure {
            width: 210px;
            height: 210px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -105px;
            margin-left: -105px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-35deg) rotateY(45deg);
            transform: rotateX(-35deg) rotateY(45deg);
            transition: 2s
        }

        figure:hover {
            -webkit-transform: rotateX(-50deg) rotateY(45deg);
            transform: rotateX(-50deg) rotateY(45deg)
        }

        .face {
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-transform-origin: center;
            transform-origin: center;
            background: #000;
            text-align: center
        }

        p {
            font-size: 180px;
            font-family: 'Digital-7';
            margin-top: 20px;
            color: #2982FF;
            text-shadow: 0px 0px 5px #000;
            -webkit-animation: color 10s infinite;
            animation: color 10s infinite;
            line-height: 180px
        }

        .front {
            -webkit-transform: translate3d(0, 0, 105px);
            transform: translate3d(0, 0, 105px);
            background: #111
        }

        .left {
            -webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
            transform: rotateY(-90deg) translate3d(0, 0, 105px);
            background: #151515
        }

        .top {
            -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
            transform: rotateX(90deg) translate3d(0, 0, 105px);
            background: #222
        }

        @keyframes color {
            0% {
                color: #2982ff;
                text-shadow: 0px 0px 5px #000
            }

            50% {
                color: #cc4343;
                text-shadow: 0px 0px 5px #ff0000
            }
        }

        @-webkit-keyframes color {
            0% {
                color: #2982ff;
                text-shadow: 0px 0px 5px #000
            }

            50% {
                color: #cc4343;
                text-shadow: 0px 0px 5px #ff0000
            }
        }
    </style>
</head>

<body>
<figure>
    <div class="face top">
        <p id="s"></p>
    </div>
    <div class="face front">
        <p id="m"></p>
    </div>
    <div class="face left">
        <p id="h"></p>
    </div>
</figure>
</body>
<script>
    function date_time(id) {
        date = new Date;
        h = date.getHours();
        if (h < 10) {
            h = "0" + h
        }
        m = date.getMinutes();
        if (m < 10) {
            m = "0" + m
        }
        s = date.getSeconds();
        if (s < 10) {
            s = "0" + s
        }
        document.getElementById("s").innerHTML = '' + s;
        document.getElementById("m").innerHTML = '' + m;
        document.getElementById("h").innerHTML = '' + h;
        setTimeout('date_time("' + "s" + '");', '1000');
        return true
    }

    window.onload = date_time('s');
</script>

</html>



文章标签：
前端开发
JavaScript
容器
程序员皮皮林
目录
相关文章
刻刻帝的海角
|
前端开发 JavaScript
构建一个动态时钟
构建一个动态时钟
刻刻帝的海角
599 0
前端充电宝
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React？
竟然可以在一个项目中混用 Vue 和 React？
前端充电宝
1761 0
落798.
|
前端开发 JavaScript API
2024 新年HTML5+Canvas制作3D烟花特效（附源码）
2024 新年HTML5+Canvas制作3D烟花特效（附源码）
落798.
1057 0
GoodTime
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
GoodTime
1190 0
老虎也淘气
|
Python
李峋同款爱心Python代码版来了
李峋同款爱心Python代码版来了
老虎也淘气
11355 132
李峋同款爱心Python代码版来了
YUNDASHI
|
7月前
|
人工智能 Linux iOS开发
OpenClaw部署不求人：零基础从入门到精通（附避坑指南）
想告别“只会聊天”的AI？OpenClaw（龙虾）是当前最火的开源AI智能体框架，真正让AI动手操作电脑——文件管理、浏览器自动化、代码编写全搞定！本文手把手教你零基础完成云端/本地部署，含环境配置、实战运行与避坑指南，小白也能轻松上手！
YUNDASHI
1878 15
云小帮
|
4月前
|
弹性计算 Ubuntu 安全
阿里云ECS安装宝塔Linux面板，使用Alibaba Cloud Linux 3.2104 LTS 64位镜像可以吗？
阿里云ECS安装宝塔面板，首选Alibaba Cloud Linux 3.2104 LTS 64位系统——阿里云官方优化、安全稳定、长期支持；次选CentOS 7.x/8.x或Ubuntu 20.04/22.04 LTS。搭配99元/年e实例或199元/年u1实例，性价比高，适合个人学习与中小企业生产环境。阿里云服务器ECS官网：https://t.aliyun.com/U/AZBUsA
云小帮
314 0
品牌测评中心
|
10月前
|
人工智能 自然语言处理 算法
2025年 GEO行业年度鸟瞰全景报告：商业化深耕期的全球竞合与企业适配指南
2025年，中国生成式AI搜索（GEO）市场规模突破480亿元，年增68%。技术成熟与企业需求推动商业化爆发，多模态检索、垂直领域适配成主流。头部效应显著，国内外巨头竞逐本土化与全球化赛道，中小企业迎来轻量化机遇。
品牌测评中心
1161 1
程序员皮皮林
生日快乐（可复制源代码）
本文展示了生日快乐动画的效果，并提供了完整的源代码供一键复制。动画包含多个气球元素，采用渐变色设计，配合动态上升效果，营造出生动欢乐的氛围。
程序员皮皮林
3739 0
故事未完&middot;
里面可以写名字的爱心代码（html）
里面可以写名字的爱心代码（html）
故事未完&middot;
1280 0
里面可以写名字的爱心代码（html）

热门文章

最新文章

  • 1
    在阿里云环境下搭建基于SonarQube的自动化安全代码检测平台
  • 2
    RabbitMQ：四种ExChange用法
  • 3
    SOFAChannel#6 线上直播报名：轻量级监控分析系统 SOFALookout 原理讲解和功能演示
  • 4
    解读 V8 GC Log（一）: Node.js 应用背景与 GC 基础知识
  • 5
    npm install 一直卡着不动如何解决
  • 6
    LabVIEW控制PLC的实现方式
  • 7
    阿里云ESSD AutoPL云盘和ESSD PL-X云盘与其他云盘有何区别？
  • 8
    Oracle Net Manager使用
  • 9
    阿里云ECS上搭建个人Leanote云笔记本
  • 10
    EXPLAIN PLAN FOR 和 SET AUTOTRACE之间的差别
  • 1
    深入理解Scala Map：从实现原理到工程实践
    21
  • 2
    基于YOLO11的共享单车智能检测系统 | 用于乱停乱放治理、入栏率核算、精细化运营 | 附完整源码与效果演示
    17
  • 3
    基于 YOLO26 的6类PCB缺陷智能检测系统（中英文双版）| 附完整源码与效果演示
    21
  • 4
    无人机检测数据集 | 5400张YOLO低空安防数据集
    19
  • 5
    工地机械检测数据集 | 4600张YOLO智慧工地数据集
    18
  • 6
    2026年重庆生成式引擎优化（GEO）服务商推荐，产业范式与技术体系宏观研究报告
    28
  • 7
    智能体释放度子集律——文本 ⊂ 音频 ⊂ 视频⊂ 游戏
    21
  • 8
    2026年重庆GEO优化-生成式引擎优化产业范式与技术体系宏观研究报告
    30
  • 9
    为什么信任必须每 120 秒重审一次？
    25
  • 10
    第一份证据由谁签发？——给 Agent 信任系统一个不垄断起点的答案
    29

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！