酷炫LED数字时钟

酷炫LED数字时钟的实现
原创 已于 2025-06-27 13:49:30 修改 · 580 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

于 2025-05-30 14:31:57 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷炫LED数字时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Orbitron', sans-serif;
            overflow: hidden;
            color: #fff;
            position: relative;
        }
        
        /* 粒子背景效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) translateX(100px);
                opacity: 0;
            }
        }
        
        .container {
            text-align: center;
            background: rgba(0, 0, 0, 0.7);
            padding: 30px 40px;
            border-radius: 20px;
            box-shadow: 0 0 40px rgba(0, 200, 255, 0.5);
            position: relative;
            overflow: hidden;
            z-index: 10;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
            background-size: 400%;
            border-radius: 22px;
            z-index: -1;
            animation: glowing 20s linear infinite;
            opacity: 0.5;
        }
        
        @keyframes glowing {
            0% {
                background-position: 0 0;
            }
            50% {
                background-position: 400% 0;
            }
            100% {
                background-position: 0 0;
            }
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 20px;
            color: #fff;
            text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
            letter-spacing: 3px;
        }
        
        .clock-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            padding: 30px 0;
        }
        
        .digit-group {
            display: flex;
            gap: 10px;
        }
        
        .digit {
            width: 100px;
            height: 180px;
            position: relative;
        }
        
        .segment {
            position: absolute;
            background: rgba(0, 200, 255, 0.3);
            transition: all 0.3s ease;
            border-radius: 5px;
        }
        
        .segment.active {
            background: #00ffff;
            box-shadow: 0 0 15px #00ffff, 0 0 30px rgba(0, 255, 255, 0.5);
        }
        
        .segment-a { top: 0; left: 20px; right: 20px; height: 15px; }
        .segment-b { top: 20px; right: 0; width: 15px; height: 70px; }
        .segment-c { bottom: 20px; right: 0; width: 15px; height: 70px; }
        .segment-d { bottom: 0; left: 20px; right: 20px; height: 15px; }
        .segment-e { bottom: 20px; left: 0; width: 15px; height: 70px; }
        .segment-f { top: 20px; left: 0; width: 15px; height: 70px; }
        .segment-g { top: 50%; transform: translateY(-50%); left: 20px; right: 20px; height: 15px; }
        
        .colon {
            width: 20px;
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 50px;
        }
        
        .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0, 200, 255, 0.3);
            transition: all 0.3s ease;
        }
        
        .dot.active {
            background: #00ffff;
            box-shadow: 0 0 10px #00ffff;
        }
        
        .date-display {
            font-size: 1.8rem;
            margin-top: 25px;
            color: #fff;
            text-shadow: 0 0 5px #00ffff;
            letter-spacing: 2px;
        }
        
        .theme-controls {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .theme-btn {
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid #00ffff;
            color: #00ffff;
            padding: 10px 20px;
            border-radius: 30px;
            font-family: 'Orbitron', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
        }
        
        .theme-btn:hover {
            background: rgba(0, 200, 255, 0.2);
            box-shadow: 0 0 15px #00ffff;
        }
        
        .footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* 响应式设计 */
        @media (max-width: 900px) {
            .digit {
                width: 70px;
                height: 126px;
            }
            
            .segment {
                border-radius: 3px;
            }
            
            .segment-a, .segment-d, .segment-g { height: 10px; }
            .segment-b, .segment-c, .segment-e, .segment-f { width: 10px; }
            
            .colon {
                height: 126px;
                gap: 35px;
            }
            
            .dot {
                width: 15px;
                height: 15px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .date-display {
                font-size: 1.4rem;
            }
        }
        
        @media (max-width: 600px) {
            .digit {
                width: 45px;
                height: 81px;
            }
            
            .segment-a, .segment-d, .segment-g { height: 7px; }
            .segment-b, .segment-c, .segment-e, .segment-f { width: 7px; }
            
            .colon {
                height: 81px;
                gap: 22px;
            }
            
            .dot {
                width: 10px;
                height: 10px;
            }
            
            h1 {
                font-size: 1.5rem;
            }
            
            .date-display {
                font-size: 1.1rem;
            }
            
            .container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>
    
    <div class="container">
        <h1>酷炫LED数字时钟</h1>
        
        <div class="clock-container">
            <!-- 小时 -->
            <div class="digit-group" id="hours">
                <div class="digit">
                    <div class="segment segment-a"></div>
                    <div class="segment segment-b"></div>
                    <div class="segment segment-c"></div>
                    <div class="segment segment-d"></div>
                    <div class="segment segment-e"></div>
                    <div class="segment segment-f"></div>
                    <div class="segment segment-g"></div>
                </div>
                <div class="digit">
                    <div class="segment segment-a"></div>
                    <div class="segment segment-b"></div>
                    <div class="segment segment-c"></div>
                    <div class="segment segment-d"></div>
                    <div class="segment segment-e"></div>
                    <div class="segment segment-f"></div>
                    <div class="segment segment-g"></div>
                </div>
            </div>
            
            <!-- 冒号 -->
            <div class="colon">
                <div class="dot active"></div>
                <div class="dot active"></div>
            </div>
            
            <!-- 分钟 -->
            <div class="digit-group" id="minutes">
                <div class="digit">
                    <div class="segment segment-a"></div>
                    <div class="segment segment-b"></div>
                    <div class="segment segment-c"></div>
                    <div class="segment segment-d"></div>
                    <div class="segment segment-e"></div>
                    <div class="segment segment-f"></div>
                    <div class="segment segment-g"></div>
                </div>
                <div class="digit">
                    <div class="segment segment-a"></div>
                    <div class="segment segment-b"></div>
                    <div class="segment segment-c"></div>
                    <div class="segment segment-d"></div>
                    <div class="segment segment-e"></div>
                    <div class="segment segment-f"></div>
                    <div class="segment segment-g"></div>
                </div>
            </div>
            
            <!-- 冒号 -->
            <div class="colon">
                <div class="dot active"></div>
                <div class="dot active"></div>
            </div>
            
            <!-- 秒 -->
            <div class="digit-group" id="seconds">
                <div class="digit">
                    <div class="segment segment-a"></div>
                    <div class="segment segment-b"></div>
                    <div class="segment segment-c"></div>
                    <div class="segment segment-d"></div>
                    <div class="segment segment-e"></div>
                    <div class="segment segment-f"></div>
                    <div class="segment segment-g"></div>
                </div>
                <div class="digit">
                    <div class="segment segment-a"></div>
                    <div class="segment segment-b"></div>
                    <div class="segment segment-c"></div>
                    <div class="segment segment-d"></div>
                    <div class="segment segment-e"></div>
                    <div class="segment segment-f"></div>
                    <div class="segment segment-g"></div>
                </div>
            </div>
        </div>
        
        <div class="date-display" id="dateDisplay"></div>
        
        <div class="theme-controls">
            <button class="theme-btn" id="blueTheme">蓝色主题</button>
            <button class="theme-btn" id="redTheme">红色主题</button>
            <button class="theme-btn" id="greenTheme">绿色主题</button>
        </div>
    </div>
    

    <script>
        // 数字段映射 (a, b, c, d, e, f, g)
        const digitMap = {
            0: [1, 1, 1, 1, 1, 1, 0],
            1: [0, 1, 1, 0, 0, 0, 0],
            2: [1, 1, 0, 1, 1, 0, 1],
            3: [1, 1, 1, 1, 0, 0, 1],
            4: [0, 1, 1, 0, 0, 1, 1],
            5: [1, 0, 1, 1, 0, 1, 1],
            6: [1, 0, 1, 1, 1, 1, 1],
            7: [1, 1, 1, 0, 0, 0, 0],
            8: [1, 1, 1, 1, 1, 1, 1],
            9: [1, 1, 1, 1, 0, 1, 1]
        };
        
        // 创建背景粒子
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // 随机大小
                const size = Math.random() * 10 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                // 随机动画延迟
                particle.style.animationDelay = `${Math.random() * 15}s`;
                
                particlesContainer.appendChild(particle);
            }
        }
        
        // 更新时间显示
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            
            // 更新小时
            updateDigitGroup('hours', hours);
            // 更新分钟
            updateDigitGroup('minutes', minutes);
            // 更新秒
            updateDigitGroup('seconds', seconds);
            
            // 更新日期
            const dateDisplay = document.getElementById('dateDisplay');
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            dateDisplay.textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        // 更新数字组
        function updateDigitGroup(groupId, digits) {
            const group = document.getElementById(groupId);
            const digitElements = group.querySelectorAll('.digit');
            
            for (let i = 0; i < digitElements.length; i++) {
                const digit = parseInt(digits[i]);
                const segments = digitElements[i].querySelectorAll('.segment');
                const segmentStates = digitMap[digit];
                
                for (let j = 0; j < segments.length; j++) {
                    if (segmentStates[j] === 1) {
                        segments[j].classList.add('active');
                    } else {
                        segments[j].classList.remove('active');
                    }
                }
            }
        }
        
        // 设置主题
        function setTheme(color) {
            const activeSegments = document.querySelectorAll('.segment.active, .dot.active');
            const buttons = document.querySelectorAll('.theme-btn');
            const containerGlow = document.querySelector('.container');
            
            // 移除所有颜色类
            activeSegments.forEach(segment => {
                segment.classList.remove('blue-theme', 'red-theme', 'green-theme');
            });
            
            buttons.forEach(button => {
                button.classList.remove('active-theme');
            });
            
            // 添加新颜色类
            activeSegments.forEach(segment => {
                segment.classList.add(`${color}-theme`);
            });
            
            // 更新容器发光效果
            containerGlow.style.boxShadow = `0 0 40px ${getThemeColor(color)}`;
            
            // 激活当前主题按钮
            document.getElementById(`${color}Theme`).classList.add('active-theme');
        }
        
        // 获取主题颜色
        function getThemeColor(theme) {
            switch(theme) {
                case 'blue': return 'rgba(0, 200, 255, 0.7)';
                case 'red': return 'rgba(255, 50, 50, 0.7)';
                case 'green': return 'rgba(50, 255, 50, 0.7)';
                default: return 'rgba(0, 200, 255, 0.7)';
            }
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createParticles();
            updateTime();
            setInterval(updateTime, 1000);
            
            // 主题按钮事件
            document.getElementById('blueTheme').addEventListener('click', () => setTheme('blue'));
            document.getElementById('redTheme').addEventListener('click', () => setTheme('red'));
            document.getElementById('greenTheme').addEventListener('click', () => setTheme('green'));
            
            // 初始为蓝色主题
            setTheme('blue');
        });
    </script>
</body>
</html>

ziblog
关注
Android LED电子表时钟字体digital font
11-10 6609
字体效果如下图所示： 这种类型的字体样式会被一些UI设计用于Android APP中时钟显示，比如交通灯倒计时。 实现这种字体样式，先导入一个字体包：digital.ttf。这个digital.ttf文件，我已经上传，下载链接地址：http://download.youkuaiyun.com/download/zhangphil/9965392 拿到digital.ttf文件后，作为Android assets资源文件导入，如下图所示： 然后就可以使用了，我给出一个例子，重写一个TextView，Digi.
【CSS案例】LED数字时钟
TheToysOfTown的博客
06-11 687
原版的标签都是写死的HTML代码，我这里使用动态创建，修改标签只需要修改配置即可。原插件的宽高都是写死的，不活用，我把宽高全设成了em单位，调整大小只需要调整。
Android液晶字体、LED数字时钟显示
07-11
Android液晶字体、LED数字时钟显示，添加到资源库，可实现安卓电子时钟效果
数字时钟
cxzqqq的博客
10-13 224
显早制作----数字时钟。
TextClock数字时钟及字体样式和使用字体
qq_50065143的博客
06-15 5521
<TextClock android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_centerHorizontal="true" android:gravity="center_horizontal" android:format24Hour="hh:mm" andro.
酷炫LED数字时钟js代码
06-11
【酷炫LED数字时钟js代码】是一种利用JavaScript编程语言实现的动态时钟效果，它以LED数字显示的形式，实时展示当前的本地时间。这种特效通常用于网站设计，为网页增添科技感和互动性。LED数字时钟的核心是通过...
jQuery酷炫LED数字时钟.zip
07-11
引入js文件 [removed][removed] Jquery是网页编程所需的重要技术之一。Jquery是继prototype之后又一个优秀的Javascrīpt框架，它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器。...
红色酷炫LED数字时钟JavaScript动画实现
标题：酷炫LED数字时钟js代码 知识点解析： 1. LED数字时钟：LED数字时钟是一种显示时间的装置，使用发光二极管(LED)作为显示元件，能够清晰地展现数字时间。由于LED元件的可塑性高，它能够展现出多种视觉效果，从而...
JS实现酷炫LED数字时钟动画特效教程
该文件标题中提到的“JS酷炫红色LED数字时钟特效代码”可以引导我们探讨JavaScript编程语言在实现LED数字时钟动画特效方面的应用。红色LED效果的实现方式和如何获取本地时间是这个标题所包含的关键知识点。接下来，...
精选资源
JS酷炫红色LED数字时钟代码
06-24
在这个项目中，我们关注的是一个利用JS创建的酷炫红色LED数字时钟代码。这个时钟不仅能够显示当前的本地时间，还通过动画效果提升了用户体验，使得时间的展示更为生动有趣。 首先，我们要理解如何用JS获取本地时间...
时钟字体大全
08-08
时钟字体 时钟字体 下载 时钟字体适用于各种广告制作
Android仿数字时钟显示所需字体
11-09
Android手机LDE液晶数字时钟，电子时钟显示，添加到项目资源库，设置展示字体，可展示电子时钟效果。
Led效果字体资源下载
01-12
led字体资源。led字体资源。led字体资源。led字体资源。led字体资源。led字体资源。
电子时钟字体文件electronicFont DS-DIGIT.TTF
11-23
电子时钟字体文件electronicFont DS-DIGIT.TTF
led时间字体
08-20
和电子手表一样的时间字体
【亲测免费】 炫酷数字钟表字体：让你的网页瞬间科技感爆棚！
gitblog_06565的博客
09-20 641
炫酷数字钟表字体：让你的网页瞬间科技感爆棚！ 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在网页设计中，数字钟表的显示效果往往能够为页面增添一份独特的科技感。为了帮助开发者轻松实现这一效果，我们推出了一个专门用于实现数字钟表字体的开源项目。该项目提供了一套完整的资源文件，包括特殊字体文件和相应的CSS样式代码，让你能够快速在网页中实现炫酷的数字钟表效果。 项目技术分...
【免费下载】 LED液晶数字字体47种
最新发布
gitblog_09751的博客
10-21 1553
LED液晶数字字体47种 【下载地址】LED液晶数字字体47种 本仓库提供了一个名为“LED液晶数字字体47种.zip”的资源文件下载。该文件包含了47种不同风格的LED液晶数字字体，涵盖了从轻到重的多种字重选择。这些字体设计独特，适用于各种需要LED数字显示的场景，如电子设备、广告牌、游戏界面等 ...
Android LED数字/电子表字体digital font
热门推荐
Zhang Phil
09-06 1万+
Android LED数字/电子表字体digital font先看实现的字体样式：这种类型的字体样式会被一些UI设计用于Android APP中视频，或者广告的倒计时牌，比如常见的Android视频直播软件中右上角的广告倒计时。实现这种字体样式，先导入一个字体包：digital-7.ttf。这个digital-7.ttf文件，我已经上传，下载链接地址：http://download.csdn.ne
如何将时间字体LED化（类似电子表）显示
y1009666319的博客
10-21 608
首先现在字体，引用进去 @font-face{ font-family: dianzibiao; src: url('../../static/DS-DIGIB-2.ttf'); } 然后在要变的地方使用 <strong><span id="timecontent" style="font-family: 'dianzibiao';color: #860000;font-size: 5rem;"></span></strong> .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值