下面的代码适用于以CSS HTML和javascript实现的7段数字时钟。但是,我尝试在此处实现javascript,但是我的代码显然无法正常工作。我尝试使用if-else之类的简单javascript代码来实现我是一个初学者。如果您愿意,我将不胜感激 并预先感谢
var digitSegments = [
[1,2,3,4,5,6], //0
[2,3],//1
[1,2,7,5,4],//2
[1,2,7,3,4],//3
[6,7,2,3],//4
[1,6,7,3,4],//5
[1,6,5,4,3,7],//6
[1,2,3], //7
[1,2,3,4,5,6,7],//8
[1,2,7,3,6]//9
]
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();
if(_hours/10 <10 ){
setNumber=(_hours[0], 0 , 1);
setNumber=(_hours[1], hours%10, 1);
}
else{
setNumber(_hours[0], parseInt(hours/10), 1);
setNumber(_hours[1], hours%10, 1);
}
if(_minutes/10 <10 ){
setNumber=(_minutes[0], 0 , 1);
setNumber=(_minutes[1], minutes%10, 1);
}
else{
setNumber(_minutes[0], parseInt(minutes/10), 1);
setNumber(_minutes[1], minutes%10, 1);
}
if(_seconds/10 <10 ){
setNumber=(_seconds[0], 0 , 1);
setNumber=(_seconds[1], seconds%10, 1);
}
else{
setNumber(_seconds[0], parseInt(seconds/10), 1);
setNumber(_seconds[1], seconds%10, 1);
}
}, 1000);
});
var setNumber = function (index , number , on)
{
if (date.getSeconds==digitSegments[6] && date.getSeconds==digitSegments[0]){
date.getMinutes++;
}
else if(date.getMinutes == digitSegments[6] && date.getMinutes ==digitSegments[0]){
date.getHours++;
}
else if(date.getHours == digitSegments[2] && date.getHours == digitSegments[4]){
date.getSeconds++
}
}
.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;
}
<div class="clock">
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="separator"></div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="separator"></div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</div>