【CSS案例】LED数字时钟

原版：插件库：led文字展示脚本

【CSS案例】LED数字时钟

HTML代码

<div class="clock"></div>

CSS代码

原插件的宽高都是写死的，不活用，我把宽高全设成了em单位，调整大小只需要调整 .clock 的 font-size 即可。

html,
body {
	margin: 0;
	padding: 0;
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
}

.clock {
	height: 2em;
	font-size: 15px;
}

.digit {
	width: 1.2em;
	height: 2em;
	position: relative;
	display: inline-block;
}

.date-words {
	color: #bde1ff;
	display: inline-block;
	height: 2em;
	position: relative;
	top: -.45em;
	font-size: 1.2em;
}

.digit .segment {
	background: #bde1ff;
	border-radius: .05em;
	position: absolute;
	opacity: 0.15;
	transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
}

.digit .segment.on,
.separator {
	opacity: 1;
	box-shadow: 0 0 50px #bde1ff;
	transition: opacity 0s;
	-webkit-transition: opacity 0s;
	-ms-transition: opacity 0s;
	-moz-transition: opacity 0s;
	-o-transition: opacity 0s;
}

.separator {
	width: .2em;
	height: .2em;
	background: #bde1ff;
	border-radius: 50%;
	display: inline-block;
	position: relative;
}

.separator-up {
	top: -1.25em;
	left: .25em;
}

.separator-down {
	top: -.5em;
	left: -.25em;
}

.digit .segment:nth-child(1) {
	top: .1em;
	left: .2em;
	right: .2em;
	height: .1em;
}

.digit .segment:nth-child(2) {
	top: .2em;
	right: .1em;
	width: .1em;
	height: .75em;
	height: calc(50% - .25em);
}

.digit .segment:nth-child(3) {
	bottom: .2em;
	right: .1em;
	width: .1em;
	height: .75em;
	height: calc(50% - .25em);
}

.digit .segment:nth-child(4) {
	bottom: .1em;
	right: .2em;
	height: .1em;
	left: .2em;
}

.digit .segment:nth-child(5) {
	bottom: .2em;
	left: .1em;
	width: .1em;
	height: .75em;
	height: calc(50% - .25em);
}

.digit .segment:nth-child(6) {
	top: .2em;
	left: .1em;
	width: .1em;
	height: .75em;
	height: calc(50% - .25em);
}

.digit .segment:nth-child(7) {
	bottom: .95em;
	bottom: calc(50% - .05em);
	right: .2em;
	left: .2em;
	height: .1em;
}

JS代码

var digitSegments = [
	[1, 2, 3, 4, 5, 6],
	[2, 3],
	[1, 2, 7, 5, 4],
	[1, 2, 7, 3, 4],
	[6, 7, 2, 3],
	[1, 6, 7, 3, 4],
	[1, 6, 5, 4, 3, 7],
	[1, 2, 3],
	[1, 2, 3, 4, 5, 6, 7],
	[1, 2, 7, 3, 6, 4]  // 这处我有改动，原版的9没有最下边那横
]

document.addEventListener('DOMContentLoaded', function () {
	createEle ();
	let _years = document.querySelectorAll('.years');
	// 两位的元素单独提出来
	let _eleArr = ['months', 'days', 'hours', 'minutes', 'seconds'];

	setInterval(function () {
		var date = new Date();
		let years = date.getFullYear();
		let timeArr = [date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()];

		setNumber(_years[0], Math.floor(years / 1000), 1);
		setNumber(_years[1], Math.floor(years / 100) % 10, 1);
		setNumber(_years[2], Math.floor(years / 10) % 100, 1);
		setNumber(_years[3], years % 10, 1);

		// 循环遍历两位数的时间
		for (let i = 0; i < _eleArr.length; i++) 
			setTwo(document.querySelectorAll('.' + _eleArr[i]), timeArr[i]);
	}, 1000);
});

/** 设置二位数 */
function setTwo(ele, val) {
	setNumber(ele[0], Math.floor(val / 10), 1);
	setNumber(ele[1], val % 10, 1);
}

var setNumber = function (digit, number, on) {
	var segments = digit.querySelectorAll('.segment');
	var current = parseInt(digit.getAttribute('data-value'));

	if (!isNaN(current) && current != number) {
		digitSegments[current].forEach(function (digitSegment, index) {
			setTimeout(function () {
				segments[digitSegment - 1].classList.remove('on');
			}, index * 45)
		});
	}

	if (isNaN(current) || current != number) {
		setTimeout(function () {
			digitSegments[number].forEach(function (digitSegment, index) {
				setTimeout(function () {
					segments[digitSegment - 1].classList.add('on');
				}, index * 45)
			});
		}, 250);
		digit.setAttribute('data-value', number);
	}
}

原版的标签都是写死的HTML代码，我这里使用动态创建，修改标签只需要修改配置即可。

/** 创建标签 */
function createEle () {
	let clock = document.querySelector('.clock');
	let eleArr = [
		{clazz: ['digit', 'years'], count: 4, html: 'segment'},
		{clazz: ['date-words'], count: 1, html: '年'},
		{clazz: ['digit', 'months'], count: 2, html: 'segment'},
		{clazz: ['date-words'], count: 1, html: '月'},
		{clazz: ['digit', 'days'], count: 2, html: 'segment'},
		{clazz: ['date-words'], count: 1, html: '日'},
		{clazz: ['digit', 'hours'], count: 2, html: 'segment'},
		{clazz: ['separator', 'separator-up'], count: 1, html: ''},
		{clazz: ['separator', 'separator-down'], count: 1, html: ''},
		{clazz: ['digit', 'minutes'], count: 2, html: 'segment'},
		{clazz: ['separator', 'separator-up'], count: 1, html: ''},
		{clazz: ['separator', 'separator-down'], count: 1, html: ''},
		{clazz: ['digit', 'seconds'], count: 2, html: 'segment'},
	]
	for (const ele of eleArr) {
		for (let count = 0; count < ele.count; count++) {
			// 1.创建div标签
			let eleDiv = document.createElement('div');
			// 2.添加class名
			for (const clazz of ele.clazz) {
				eleDiv.classList.add(clazz);
			}
			// 3.判断内容
			if (ele.html === 'segment') {
				for (let times = 0; times < 7; times++) {
					let segment = document.createElement('div');
					segment.classList.add('segment');
					eleDiv.appendChild(segment);
				}
			} else {
				eleDiv.innerText = ele.html;
			}
			// 4.把生成的div添加进.clock
			clock.appendChild(eleDiv);
			clock.appendChild(document.createTextNode(" "));  // 空格标签
		}
	}
}