js动态炫酷数字时钟

这是一款使用js和CSS制作的动态炫酷数字时钟。该js数字时钟采用LED数字时钟样式，效果十分逼真。

 

在线预览   下载

 

 使用方法

 HTML结构

该js数字时钟的HTML结构如下：

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

 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);

  }

}