代码地址与作者: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>
效果图: