创意方块时钟

创意方块时钟

每秒会自动填充一个其他颜色的小格子，满格后自动增加一分钟。

引入css

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">

调用html

<div class="clock">
  <div class="clock__number hours">
    <div class="digit digit__0">
      <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 class="digit digit__0">
      <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>
  <div class="points">
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
  </div>
  <div class="clock__number minutes">
    <div class="digit digit__0">
      <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 class="digit digit__0">
      <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>
</div>

底部引入js

<script src="js/script.js"></script>