这是一款使用js和CSS制作的动态炫酷数字时钟。该js数字时钟采用LED数字时钟样式，效果十分逼真。
使用方法
HTML结构
该js数字时钟的HTML结构如下：
CSS样式
为该js数字时钟添加下面的css样式。
.clock {
height:200px;
position:absolute;
top:50%;
left:50%;
width:900px;
margin-left:-450px;
margin-top:-100px;
text-align:center;
}
.digit {
width:120px;
height:200px;
margin:0 5px;
position:relative;
display:inline-block;
}
.digit .segment {
background:#c00;
border-radius:5px;
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 rgba(255,0,0,0.7);
transition:opacity 0s;
-webkit-transition:opacity 0s;
-ms-transition:opacity 0s;
-moz-transition:opacity 0s;
-o-transition:opacity 0s;
}
.separator {
width:20px;
height:20px;
background:#c00;
border-radius:50%;
display:inline-block;
position:relative;
top:-90px;
}
.digit .segment:nth-child(1) {
top:10px;
left:20px;
right:20px;
height:10px;
}
.digit .segment:nth-child(2) {
top:20px;
right:10px;
width:10px;
height:75px;
height:calc(50% - 25px);
}
.digit .segment:nth-child(3) {
bottom:20px;
right:10px;
width:10px;
height:75px;
height:calc(50% - 25px);
}
.digit .segment:nth-child(4) {
bottom:10px;
right:20px;
height:10px;
left:20px;
}
.digit .segment:nth-child(5) {
bottom:20px;
left:10px;
width:10px;
height:75px;
height:calc(50% - 25px);
}
.digit .segment:nth-child(6) {
top:20px;
left:10px;
width:10px;
height:75px;
height:calc(50% - 25px);
}
.digit .segment:nth-child(7) {
bottom:95px;
bottom:calc(50% - 5px);
right:20px;
left:20px;
height:10px;
}
初始化插件
然后通过下面的js代码来初始化该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]
]
document.addEventListener('DOMContentLoaded', function() {
var _hours = document.querySelectorAll('.hours');
var _minutes = document.querySelectorAll('.minutes');
var _seconds = document.querySelectorAll('.seconds');
setInterval(function() {
var date = new Date();
var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds();
setNumber(_hours[0], Math.floor(hours/10), 1);
setNumber(_hours[1], hours%10, 1);
setNumber(_minutes[0], Math.floor(minutes/10), 1);
setNumber(_minutes[1], minutes%10, 1);
setNumber(_seconds[0], Math.floor(seconds/10), 1);
setNumber(_seconds[1], seconds%10, 1);
}, 1000);
});
var setNumber = function(digit, number, on) {
var segments = digit.querySelectorAll('.segment');
var current = parseInt(digit.getAttribute('data-value'));
// only switch if number has changed or wasn't set
if (!isNaN(current) && current != number) {
// unset previous number
digitSegments[current].forEach(function(digitSegment, index) {
setTimeout(function() {
segments[digitSegment-1].classList.remove('on');
}, index*45)
});
}
if (isNaN(current) || current != number) {
// set new number after
setTimeout(function() {
digitSegments[number].forEach(function(digitSegment, index) {
setTimeout(function() {
segments[digitSegment-1].classList.add('on');
}, index*45)
});
}, 250);
digit.setAttribute('data-value', number);
}
}
