bbs-go-site

我在css和HTML中有用于数字时钟的代码，但是在实现它的javascript时遇到了麻烦，它不能与我一起工作，但是我正在学习javascript新的东西，我在互联网上看到的所有代码都很难理解有人可以用简单的编码方式做到这一点吗？并在此感谢

.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>

如何在js中创建数字时钟？