如何让我的代码适用于JavaScript中的7段数字时钟？

由 发布于

下面的代码适用于以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>