方块时钟特效

请看下面的动画

思路也很简单一共60个小方块，每15个小方块一个数字，使用的是定时器，没500ms执行一次，感觉这个和小时候的那种电子手表很像， 看下html结构吧 就贴一部分吧，有点多，但是都是相同代码，后面我会把代码块发出来

            <div class='digit d0'>
              <div class='pixel pixel_1'></div>
              <div class='pixel pixel_2'></div>
              <div class='pixel pixel_3'></div>
              <div class='pixel pixel_4'></div>
              <div class='pixel pixel_5'></div>
              <div class='pixel pixel_6'></div>
              <div class='pixel pixel_7'></div>
              <div class='pixel pixel_8'></div>
              <div class='pixel pixel_9'></div>
              <div class='pixel pixel_10'></div>
              <div class='pixel pixel_11'></div>
              <div class='pixel pixel_12'></div>
              <div class='pixel pixel_13'></div>
              <div class='pixel pixel_14'></div>
              <div class='pixel pixel_15'></div>
            </div>
          </div>

打家里可以代码也是，每个15个div块为一组 请看图片

这个最重要是，就是用样式显示出数字的问题，我们需要利用div和css来画0-9的数字 举个例子 比如说样式显示的0

.d0 .pixel_1, .d0 .pixel_2, .d0 .pixel_3, .d0 .pixel_4, .d0 .pixel_6, .d0 .pixel_7, .d0 .pixel_9, .d0 .pixel_10, .d0 .pixel_12, .d0 .pixel_13, .d0 .pixel_14, .d0 .pixel_15 {
  background: red;
}
.d0 .pixel_1.pixel__active, .d0 .pixel_2.pixel__active, .d0 .pixel_3.pixel__active, .d0 .pixel_4.pixel__active, .d0 .pixel_6.pixel__active, .d0 .pixel_7.pixel__active, .d0 .pixel_9.pixel__active, .d0 .pixel_10.pixel__active, .d0 .pixel_12.pixel__active, .d0 .pixel_13.pixel__active, .d0 .pixel_14.pixel__active, .d0 .pixel_15.pixel__active {
  background: green;
}

大家可以仔细看下 样式里并没有定义 pixel_5 pixel_8 pixel_11 正好是个0

图上已经描述清楚了5 8 11正好是白色的，同理其他的数字，也要用css表述出来

下面主要看js逻辑，其实js比较简单

     let digits = document.getElementsByClassName('digit'),// 获取所有父级
      pixels = document.getElementsByClassName('pixel'); // 获取虽有pixel子级
      
      function setTime() {
    let i,
        date = new Date(), //获取当前时间
        seconds = date.getSeconds(), // 分钟数
        pixels_to_toggle = (seconds === 0)? 60 : seconds;
        // 这个主要是确定时分  根据当前的数字确定样式
        time_numbers = ((date).toTimeString().substr(0,6)).split(':').join('');
        
    for (i = 0; i < time_numbers.length; i++) { // 这个循环就是确定样式的
        digits[i].className = 'digit d' + time_numbers.charAt(i); 
    }
  
    for (i = 0; i < pixels_to_toggle; i++) { // 这个是添加和删除pixel__active 
      pixels[i].classList.toggle('pixel__active', seconds !== 0);
    }
};

这是我的代码块

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”