当前位置： 首页 > news >正文

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

news 2025/7/7 23:00:51

文章目录

  • 一、效果演示
  • 二、Code
    • HTML
    • CSS
    • JavaScript
  • 三、实现思路拆分
    • CSS 部分
    • JavaScript 部分
  • 四、源代码

一、效果演示

在这里插入图片描述

文末可一键复制完整代码

二、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>

相关文章：

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

文章目录 一、效果演示二、CodeHTMLCSSJavaScript 三、实现思路拆分CSS 部分JavaScript 部分 四、源代码 一、效果演示 文末可一键复制完整代码 二、Code HTML <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…...

编程日记 2024/10/8 23:23:17

大模型微调技术之 LoRA：开启高效微调新时代

一、LoRA 简介 LoRA&#xff0c;即低秩适应&#xff08;Low-Rank Adaptation&#xff09;&#xff0c;是一种用于微调大型语言模型的技术&#xff0c;旨在以较小的计算资源和数据量实现模型的快速适应特定任务或领域。 LoRA 方法通过引入低秩近似的思想&#xff0c;对大型预训…...

编程日记 2024/10/8 23:22:16

【Vue】Vue2（2）

文章目录 1 数据代理1.1 回顾Object.defineproperty方法1.2 何为数据代理1.3 Vue中的数据代理 2 事件处理2.1 事件的基本使用2.2 事件修饰符2.3 键盘事件 1 数据代理 1.1 回顾Object.defineproperty方法 <!DOCTYPE html> <html><head><meta charset&quo…...

编程日记 2024/10/8 23:20:13

如何实现一个基于 HTML+CSS+JS 的任务进度条

如何实现一个基于 HTMLCSSJS 的任务进度条 在网页开发中&#xff0c;任务进度条是一种常见的 UI 组件&#xff0c;它可以直观地展示任务的完成情况。本文将向你展示如何使用 HTML CSS JavaScript 来创建一个简单的、交互式的任务进度条。用户可以通过点击进度条的任意位置来…...

编程日记 2024/10/8 23:19:12

学会流体力学，冬天洗澡再也不冷啦

前些日子收到一位网友“究极理性怪物”的私信&#xff0c;说最近在学校的公共浴室洗澡时&#xff0c;快被冻死了&#xff0c;希望我从流体力学角度帮他分析一下浴室的温度分布&#xff0c;以便找到相对温暖的洗澡位置。 我看到后觉得很有意思&#xff0c;就与他展开了关于澡堂…...

编程日记 2024/10/8 23:18:10

WPF下使用FreeRedis操作RedisStream实现简单的消息队列

Redis Stream简介 Redis Stream是随着5.0版本发布的一种新的Redis数据类型： 高效消费者组：允许多个消费者组从同一数据流的不同部分消费数据，每个消费者组都能独立地处理消息，这样可以并行处理和提高效率。 阻塞操作：消费者可以设置阻塞操作，这样它们会在流中有新数据…...

编程日记 2024/10/8 23:17:09

踩坑NVTX

最开始在 【简说】NVTX Nsight Nvidia性能分析利器 看到NVTX的时候&#xff0c;我觉得这是一个好东西啊&#xff0c;可以详细说明每一段时间对应的是哪一段程序。 看了一下github&#xff0c;他的文章已经过时&#xff0c;现在已经不需要链接动态库了&#xff0c;直接includ…...

编程日记 2024/10/8 23:15:06

Ubuntu修改IP方法

方法一&#xff1a;通过图形化界面修改IP 打开网络设置&#xff1a; 点击桌面右上角的网络图标&#xff0c;然后选择“设置”或“网络设置”。 选择网络接口&#xff1a; 在网络设置窗口中&#xff0c;选择你正在使用的网络接口&#xff08;有线或无线网络&#xff09;。 进…...

编程日记 2024/10/8 23:14:05

C++——STL简介

目录 一、什么是STL 二、STL的版本 三、STL的六大组件 没用的话..... 不知不觉两个月没写博客了&#xff0c;暑假后期因为学校的事情在忙&#xff0c;开学又在准备学校的java免修&#xff0c;再然后才继续开始学C&#xff0c;然后最近打算继续写博客沉淀一下最近学到的几周…...

编程日记 2024/10/8 23:12:02

[linux] 磁盘清理相关

在 CentOS 7 中清理磁盘空间可以通过多种方法实现&#xff0c;以下是一些常用的步骤和命令&#xff1a; 1. 查找和删除大文件 你可以使用 find 命令查找占用大量空间的文件&#xff1a; find / -type f -size 100M 2>/dev/null这条命令会查找大于 100 MB 的文件。你可以根…...

编程日记 2024/10/8 23:08:59

【笔记】DDD领域驱动设计

同名读书笔记&#xff0c;对于一些自觉重要的点进行记录。 扩展资源&#xff1a;github.com/evancyz/ddd-learning UML中类图的一些基本知识 - jack_Meng - 博客园 最后的第四部分暂时没看 Part Two 模型驱动设计的构造块 Chapter 5 软件中所表示的模型 5.2 模式&#xff1a;…...

编程日记 2024/10/8 23:05:56

用AI构建小程序需要多久？效果如何？

随着移动互联网的快速发展&#xff0c;多端应用的需求日益增长。为了提高开发效率、降低成本并保证用户体验的一致性&#xff0c;前端跨端技术在如今的开发界使用已经非常普遍了&#xff0c;技术界较为常用的跨端技术有小程序技术、HTML5技术两大类。 2023年以来&#xff0c;伴…...

编程日记 2024/10/8 23:03:54

深度学习的应用综述

文章目录 引言深度学习的基本概念深度学习的主要应用领域计算机视觉自然语言处理语音识别强化学习医疗保健金融分析 深度学习应用案例公式1.损失函数(Loss Function) 结论 引言 深度学习是机器学习的一个子领域&#xff0c;通过模拟人脑的神经元结构来处理复杂的数据。近年来&…...

编程日记 2024/10/8 23:00:51

whereis命令：查找命令的路径

一、命令简介 ​whereis​ 命令用于查找命令的&#xff1a;可执行文件、帮助文件和源代码文件。 例如 $ whereis ls ls: /usr/bin/ls /usr/share/man/man1/ls.1.gz找到了 ls 命令的可执行文件、帮助文件的位置。 ‍ 二、命令参数 命令格式 whereis [选项] [命令名称]选项…...

编程日记 2024/10/8 22:58:49

【ECMAScript 从入门到进阶教程】第四部分：项目实践（项目结构与管理，单元测试，最佳实践与开发规范，附录）

第四部分&#xff1a;项目实践 第十四章 项目结构与管理 在构建现代 Web 应用程序时&#xff0c;良好的项目结构和管理是确保代码可维护性、高效开发和部署成功的关键因素。这一章将深入讨论项目初始化与配置&#xff0c;以及如何使用构建工具来简化和优化项目建设过程。 14…...

编程日记 2024/10/8 22:57:48

算法讲解—最小生成树（Kruskal 算法）

算法讲解—最小生成树&#xff08;Kruskal 算法&#xff09; 简介 根据度娘的解释我们可以知道&#xff0c;最小生成树(Minimum Spanning Tree, MST)就是&#xff1a;一个有 n n n 个结点的连通图的生成树是原图的极小连通子图&#xff0c;且包含原图中的所有 n n n 个结点…...

编程日记 2024/10/8 22:53:43

掌握 C# 多线程与异步编程

现代应用程序通常需要执行复杂的计算或处理 I/O 操作&#xff0c;这些操作可能会导致主线程阻塞&#xff0c;从而降低用户体验。C# 提供了多线程与异步编程的多种工具&#xff0c;让我们能够高效地并发处理任务。本文将介绍 C# 中的多线程与异步编程&#xff0c;包括 Thread 类…...

编程日记 2024/10/8 22:51:41

Angular 2 用户输入

Angular 2 用户输入 Angular 2 是一个由 Google 维护的开源前端 web 框架，用于构建单页应用程序（SPA）。它以其高效的双向数据绑定、模块化架构和强大的依赖注入系统而闻名。在 Angular 2 应用程序中，处理用户输入是核心功能之一，因为它允许应用程序响应用户的操作。 Ang…...

编程日记 2024/10/8 22:50:38

线程安全的单例模式 | 可重入 | 线程安全 |死锁（理论）

&#x1f308;个人主页&#xff1a; 南桥几晴秋 &#x1f308;C专栏&#xff1a; 南桥谈C &#x1f308;C语言专栏&#xff1a; C语言学习系列 &#x1f308;Linux学习专栏&#xff1a; 南桥谈Linux &#x1f308;数据结构学习专栏&#xff1a; 数据结构杂谈 &#x1f308;数据…...

编程日记 2024/10/8 22:48:36

解决方案：梯度提升树（Gradient Boosting Trees）跟GBDT（Gradient Boosting Decision Trees）有什么区别

文章目录 一、现象二、解决方案梯度提升树&#xff08;GBT&#xff09;GBDT相同点区别 一、现象 在工作中&#xff0c;在机器学习中&#xff0c;时而会听到梯度提升树&#xff08;Gradient Boosting Trees&#xff09;跟GBDT&#xff08;Gradient Boosting Decision Trees&…...

编程日记 2024/10/8 22:46:34

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/7/6 21:25:50

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/7/6 1:19:36

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/7/7 0:36:39

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/7/7 0:51:01

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/7/7 19:42:57

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/7/7 15:17:31

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/7/6 13:07:42

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/6/21 7:26:54

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/6/21 16:30:22