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

最新推荐文章于 2024-10-07 20:56:37 发布
最新推荐文章于 2024-10-07 20:56:37 发布
阅读量1k 收藏 10
点赞数 16
分类专栏： 前端 文章标签： 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45990281/article/details/142731933
版权

文章目录

一、效果演示

在这里插入图片描述

文末可一键复制完整代码

二、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>
程序员皮皮林
关注
专栏目录
霓虹灯的c语言编写程序,用C语言编写单片机流水灯程序
weixin_32302013的博客
05-18 1720
用C语言编写的单片机流水灯程序的软件和硬件，可以让八个LED轮流点亮，每个灯点亮和熄灭时间均为1秒。是利用单片机I/O口控制外部设备的简单例子。当然，在你掌握了本程序后，完全可以充分发挥你的想象，改变一下程序内容和灯的接法(比如用光耦驱动继电器来控制霓虹灯)，做出各种变化非凡的大型灯光广告牌。一、硬件电路因为电路用单片机控制，所以电路非常简洁。其电路原理图见下图，印制板图如下图所示。电路的核心部分...
用c语言编一个霓虹灯程序,基于单片机的霓虹灯控制系统设计.doc
weixin_36397447的博客
05-19 2068
基于单片机的霓虹灯控制系统设计目 录0. 11. 总体方案设计12. 硬件电路的设计22.1 单片机系统22.2 LED概述32.3 外部时钟方式电路42.4 手动复位电路42.5 霓虹灯控制电路53 软件设计53.1中断服务流程53.2霓虹灯控制电路流程64.联合调试65. 课设小结及进一步设想7参考文献8附录I 元件清单9附录II 整体电路图10附录III 源程序清单11基于单片机的...
HTML+CSS 霓虹灯数字时钟
我们好像在哪见过 私
09-26 136
HTML+CSS 霓虹灯数字时钟
简易霓虹灯控制器
py_taotao的博客
06-13 2049
简易霓虹灯控制器 （1）用发光二极管代替霓虹灯闪烁，具有多种闪烁效果，能自动切换； （2）控制器的启动由一启动按键控制，当启动2小时后能整个控制系统自动断电（包括单片机也断电）。 一、主要材料 发光二极管 9个； STC89c52单片机 1个； 单片机插座 1个； 11.0592MHZ的晶振 1个； 20pf电容*2，10uf电容 1个； 共阳数码管 6个 三极管6个； 电阻10k 1个； 电阻330 16个； 电源 三.硬件组成 1. 复位部分 2. 晶振部分 3.二极管部分 4.时钟显示部分 5
单片机花灯开关控制器C语言代码,以51单片机为核心的LED彩灯控制器设计
weixin_26720271的博客
05-23 2913
1 引言随着人们生活环境的不断改善和美化，在许多场合可以看到彩色霓虹灯。 LED 彩灯由于其丰富的灯光色彩，低廉的造价以及控制简单等特点而得到了广泛的应用，用彩灯来装饰已经成为一种时尚。但目前市场上各式样的 LED 彩灯控制器大多数用全硬件电路实现，电路结构复杂、功能单一，这样一旦制作成品只能按照固定的模式闪亮，不能根据不同场合、不同时间段的需要来调节亮灯时间、模式、闪烁频率等动态参数。这种彩灯控...
（基于Vue.js的在线教学平台）源代码+数据库表 Vue.js+Node.js+MySQL 源码免费分享
你好呀，很高兴你在看这里~
03-06 2397
毕业已经快一年啦，工作总时长也一年半左右了啦。现在也毕业季，想着与其吃灰，不如把去年写的毕设可以分享给大家，大家可以做过参考什么的，毕竟社区里秉承分享快乐原则~当然，这个项目其实很简单（大佬勿喷），技术什么的也简单，最基础的vue2，和最基础node里的express，最基础的mysql增删改查，因为当时想着过就好，所以觉得没必要写太复杂哈哈，当时也是实习下班后偶尔弄弄。虽然简单，不过还好去年答辩也顺利通过啦（当然分数不会太高哈哈）。。现在分享源代码给大家，gitee仓库自取~
花样彩灯控制器的c语言程序,用C语言实现键控彩灯系统
weixin_29053383的博客
05-18 2347
用按键(采用外部中断方式)控制彩灯的运行。通过按动按键，彩灯在三种闪亮方式(左移，右移和自定义花样)之间切换。在主程序中，设置一个判断的的标志变量flag，当没有中断发生时，标志flag的值没有被改变，程序保持运行使彩灯按其中某一种花样闪亮显示。若按下键后，使单片机产生中断，中断函数被调用，则标志flag的值将发生一次改变(这里的中断函数就是修改flag的值)，在退出中断后，主程序再次执行到判断标...
c语言爱心灯制作步骤,基于51单片机设计的心形花样灯（PCB+Proteus仿真+源程序+设计报告）...
weixin_39540426的博客
05-18 2668
设计了一个基于51单片机的心形花样灯电路，该电路可以实现32个LED灯循环闪亮、依次熄灭、对角闪亮、对角熄灭、间隔闪亮、间隔熄灭等多种功能，可以显示42种不同形式的变化效果。该电路主要由单片机芯片STC89C51、电源电路、时钟电路、复位电路和LED显示电路组成。利用Keil软件编写C语言程序，并生成目标代码Hex文件。使用Proteus软件设计仿真电路，并调入已编译好的目标代码，即可在仿真图中看...
单片机p1口亮灯实验c语言代码,手把手教你单片机流水灯实验（详解）
weixin_42552716的博客
05-20 6783
手把手教你单片机流水灯实验(详解)单片机轻松入门教学---------------------------------------------------------------------------------------------------------------每当夜幕降临，我们可以看到大街各式各样广告牌上漂亮的霓虹灯，看起来令人赏心悦目，为夜幕中的城市增添了不少亮丽色彩。其实这些霓虹...
neon-clock-gl:带有霓虹灯主题时钟、电池、指南针和其他指示器的安卓动态壁纸
06-24
霓虹时钟 GL 是一款基于安卓系统的动态壁纸应用，它为用户提供了一种独特且具有霓虹灯风格的方式来展示时间、日期、天气、指南针、电池电量等信息。这款应用不仅在视觉效果上别具一格，而且具备高度的可定制性，让...
基于51单片机控制霓虹灯设计与制作.docx
06-07
模式 and rules of the neon lights. 本项目主要围绕51单片机...通过结合单片机技术、LED显示和用户交互设计，不仅实现了霓虹灯效果的多样化，还提升了系统的可扩展性和易维护性，符合现代城市装饰和广告宣传的需求。
EDA霓虹灯（二）
12-31
在电子设计自动化（EDA）领域，Verilog HDL是一种广泛使用的硬件描述语言，用于设计复杂的数字系统，包括集成电路。...在“Projects”文件夹中，可能包含的就是学生的源代码、仿真结果和项目报告等资料。
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1122
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
最新发布
分享有趣的、贴近生活的CS知识
10-07 522
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1204
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
Vue根实例、实例总结
m0_54007573的博客
10-04 492
Vue根实例、实例总结
登录功能开发 P167重点
2303_81204446的博客
09-30 429
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1220
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值