html、js、css3制作一款辉光管时钟

代码地址与作者：https://github.com/AmperiaWang/Nixie-Clock

<html>
<head><title>辉光钟显示效果</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><style>body {background-color: #000000;}#clock-surface {position: fixed;top: 200px;left: 0%;width: 100%;text-align: center;}.nixie-container {display: inline-block;width: 100px;height: 200px;margin: 0 20px;}.nixie-background {position: absolute;width: 100px;height: 200px;}.nixie-background.active {background-color: rgba(255, 189, 23, 0.1);filter: blur(25px);-webkit-filter: blur(25px);-ms-filter: blur(25px);-moz-filter: blur(25px);}.nixie-container .nixie-number {display: block;position: absolute;width: 100px;}.nixie-number .nixie-number-part {fill: none;stroke: rgba(0, 0, 0, 0.4);stroke-width: 10;stroke-linecap: round;stroke-miterlimit: 10;}.nixie-number.active .nixie-number-part {stroke: #F58549;}.white-space {display: inline-block;width: 40px;}</style><script>$(document).ready(function () {initializeNixieTube(6, 2);update();setInterval("update()", 1000);});function initializeNixieTube(number, whiteSpaceSpan) {var template = $('#nixietube-template').html();var targetHTML = "";var whiteSpace = "<div class='white-space'></div>";var CurrentTubeNumber = 0;while (CurrentTubeNumber < number) {if (whiteSpaceSpan > 0) {if (CurrentTubeNumber % whiteSpaceSpan == 0 && CurrentTubeNumber > 0)$('#clock-surface').append(whiteSpace);}targetHTML = template.replace("[order]", CurrentTubeNumber);$('#clock-surface').append(targetHTML);CurrentTubeNumber++;}}function update() {var date = new Date();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var num0 = Math.floor(hour / 10);var num1 = hour - 10 * num0;var num2 = Math.floor(minute / 10);var num3 = minute - 10 * num2;var num4 = Math.floor(second / 10);var num5 = second - 10 * num4;for (var i = 0; i < 6; i++) {var temp = eval('num' + i);var grandSelector = "#nixie-tube-" + i;var allNumbers = grandSelector + " .nixie-number";var childSelector = grandSelector + " .nixie-number-" + temp;var background = grandSelector + " .nixie-background";$(allNumbers).each(function () {if ($(this).hasClass('active')) {$(this).removeClass('active');}});if ($(background).hasClass('active')) {$(background).removeClass('active');}$(childSelector).addClass('active');$(background).addClass('active');}}</script>
</head>
<body>
<div id='nixietube-template' style='display:none;'><div id='nixie-tube-[order]' class='nixie-container'><div class='nixie-background'></div><svg class='nixie-number nixie-number-1' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><line class="nixie-number-part" x1="128" y1="10" x2="66" y2="72"/><line class="nixie-number-part" x1="128" y1="492" x2="128" y2="10"/></svg><svg class='nixie-number nixie-number-2' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><path class="nixie-number-part"d="M38.3,66.4C59.3,32,91.7,10,128,10c63.5,0,115,67.5,115,150.7s-51.5,150.7-115,150.7"/><path class="nixie-number-part" d="M13,496c0-102,51.5-184.7,115-184.7"/><line class="nixie-number-part" x1="13" y1="496" x2="227.3" y2="496"/></svg><svg class='nixie-number nixie-number-0' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><ellipse class="nixie-number-part" cx="128" cy="256" rx="115" ry="246"/></svg><svg class='nixie-number nixie-number-3' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><path class="nixie-number-part"d="M22,410.8c16.8,46.4,57.9,86.3,106,85.9c59.7-0.5,115-63,115-140.6c0-74.1-50.4-126.7-93.5-138.1"/><line class="nixie-number-part" x1="149.5" y1="218" x2="243" y2="13"/><line class="nixie-number-part" x1="27.3" y1="13" x2="243" y2="13"/></svg><svg class='nixie-number nixie-number-9' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><circle class="nixie-number-part" cx="128" cy="128" r="115"/><line class="nixie-number-part" x1="237.4" y1="163.7" x2="135.8" y2="499"/></svg><svg class='nixie-number nixie-number-4' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><line class="nixie-number-part" x1="196.2" y1="13" x2="196.2" y2="496.7"/><line class="nixie-number-part" x1="196.2" y1="356.1" x2="22" y2="356.1"/><line class="nixie-number-part" x1="196.2" y1="13" x2="22" y2="356.1"/></svg><svg class='nixie-number nixie-number-8' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><ellipse class="nixie-number-part" cx="128" cy="129" rx="99.2" ry="116"/><ellipse class="nixie-number-part" cx="128" cy="370.8" rx="112.5" ry="125.8"/></svg><svg class='nixie-number nixie-number-5' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><path class="nixie-number-part"d="M38.3,442.6C59.3,477,91.7,499,128,499c63.5,0,115-67.5,115-150.7s-51.5-150.7-115-150.7"/><path class="nixie-number-part" d="M13,13c0,102,51.5,184.7,115,184.7"/><line class="nixie-number-part" x1="13" y1="13" x2="227.3" y2="13"/></svg><svg class='nixie-number nixie-number-7' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><line class="nixie-number-part" x1="15.5" y1="13" x2="240.5" y2="13"/><line class="nixie-number-part" x1="128" y1="496.7" x2="240.5" y2="13"/></svg><svg class='nixie-number nixie-number-6' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" version="1.1"><circle class="nixie-number-part" cx="128" cy="384" r="115"/><line class="nixie-number-part" x1="18.6" y1="348.3" x2="120.2" y2="13"/></svg></div>
</div>
<div id='clock-surface'></div>
</body>
</html>

效果图：

html、js、css3制作一款辉光管时钟相关推荐

ESP32制作一个拟辉光管时钟
拟辉光管时钟 60 多年过去了,尽管辉光管已经停产,有很多工程师仍然对它情有独钟.我用 8 块液晶显示屏制作了一个拟辉光管时钟,感受复古元素的美感,表达对过去经典的敬意. 项目起源看过<命运石 ...
web版拳皇，使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏游戏简介 <拳皇>是1994年日本SNK公司旗下在MVS游戏机板上发售的一款著名对战型格斗街机游戏,简称"KOF&qu ...
#教你从零制作拟辉光管时钟#
#制作电路板 #设计制作方案确定后,即可展开制作,制作之前先来看一下制作拟辉光管时钟所需的物料物料清单: Esp8266控制器 *1 PCB灯板 *6 ws2812灯带 1条 50*30mm透明亚 ...
辉光管时钟学习制作及开源软硬件工程
文章目录前言开源地址辉光管项目介绍辉光管的工作条件硬件部分部分介绍充电电路驱动电路不足之处软件部分总结前言作为一个电子人,一直想做一个辉光管时钟,算是大学的一个心愿,终于在快 ...
【开源】纯手工低成本打造拟辉光管时钟，也可以很酷炫
不想错过我的推送,记得右上角-查看公众号-设为星标,摘下星星送给我 <命运石之门>里 "世界线变动率探测仪",各种辉光管的作品,让热爱DIY的小伙伴欢喜,但是辉光管的价 ...
四位辉光管时钟-学长毕设
四位辉光管时钟-学长毕设电路在电路上,全部使用成品模块进行制作,通过简单的导线连接即可完成.具体介绍如下: 1) Arduino 兼容控制板控制板采用 Bluno Beetle. Bluno B ...
【单片机】辉光管时钟系列＜一＞--单片机最小系统
已经有两个多月没有写文章了,这两个多月都忙着毕业的事.在业务时间也重拾了大学期间的单片机知识,准备做个辉光管时钟.现在程序和电路都已经完成了,就等着PCB板回来了.下面我将以一系列的文章来介绍辉光管时 ...
【单片机】辉光管时钟系列＜四＞温度芯片DS18B20显示
在辉光管时钟里,我们还加入了温度显示功能.这里,我们采用简单易用的温度芯片DS18B20来测量环境温度.DS18B20是常用的数字温度传感器,具有体积小,硬件开销低,抗干扰能力强,精度高的特点. 本文 ...
【单片机】辉光管时钟系列＜二＞LCD液晶显示
在前一篇文章<辉光管时钟系列<一>单片机最小系统>中,我们是通过蜂鸣器或发光二极管来验证最小系统是否正常工作.很多时候,我们需要将系统的信息进行可视化展示,方面我们对系统进行测 ...

html、js、css3制作一款辉光管时钟

html、js、css3制作一款辉光管时钟相关推荐

最新文章

热门文章