CSS3+JS滚动数字时钟代码

CSS3+JS滚动数字时钟代码，适合全屏页面显示。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>CSS3+JS滚动数字时钟代码</title>
  6. <style>
  7. body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;}
  8. .column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;}
  9. .column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;}
  10. .colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));}
  11. .colon:after{content: ':';}
  12. .num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;}
  13. .num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;}
  14. .num.close{opacity: 0.35;}
  15. .num.far{opacity: 0.15;}
  16. .num.distant{opacity: 0.1;}
  17. </style>

  19. </head>

  21. <body>
  22. <div class="column">
  23.   <div class="num">0</div>
  24.   <div class="num">1</div>
  25.   <div class="num">2</div>
  26. </div>
  27. <div class="column">
  28.   <div class="num">0</div>
  29.   <div class="num">1</div>
  30.   <div class="num">2</div>
  31.   <div class="num">3</div>
  32.   <div class="num">4</div>
  33.   <div class="num">5</div>
  34.   <div class="num">6</div>
  35.   <div class="num">7</div>
  36.   <div class="num">8</div>
  37.   <div class="num">9</div>
  38. </div>
  39. <div class="colon"></div>
  40. <div class="column">
  41.   <div class="num">0</div>
  42.   <div class="num">1</div>
  43.   <div class="num">2</div>
  44.   <div class="num">3</div>
  45.   <div class="num">4</div>
  46.   <div class="num">5</div>
  47. </div>
  48. <div class="column">
  49.   <div class="num">0</div>
  50.   <div class="num">1</div>
  51.   <div class="num">2</div>
  52.   <div class="num">3</div>
  53.   <div class="num">4</div>
  54.   <div class="num">5</div>
  55.   <div class="num">6</div>
  56.   <div class="num">7</div>
  57.   <div class="num">8</div>
  58.   <div class="num">9</div>
  59. </div>
  60. <div class="colon"></div>
  61. <div class="column">
  62.   <div class="num">0</div>
  63.   <div class="num">1</div>
  64.   <div class="num">2</div>
  65.   <div class="num">3</div>
  66.   <div class="num">4</div>
  67.   <div class="num">5</div>
  68. </div>
  69. <div class="column">
  70.   <div class="num">0</div>
  71.   <div class="num">1</div>
  72.   <div class="num">2</div>
  73.   <div class="num">3</div>
  74.   <div class="num">4</div>
  75.   <div class="num">5</div>
  76.   <div class="num">6</div>
  77.   <div class="num">7</div>
  78.   <div class="num">8</div>
  79.   <div class="num">9</div>
  80. </div>
  81. <script>
  82. 'use strict';
  83. var size = 86;
  84. var columns = Array.from(document.getElementsByClassName('column'));
  85. var d = undefined,
  86.     c = undefined;
  87. var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant'];
  88. var use24HourClock = true;

  90. function padClock(p, n) {
  91.         return p + ('0' + n).slice(-2);
  92. }

  94. function getClock() {
  95.         d = new Date();
  96.         return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, '');
  97. }

  99. function getClass(n, i2) {
  100.         return classList.find(function (class_, classIndex) {
  101.                 return i2 - classIndex === n || i2 + classIndex === n;
  102.         }) || '';
  103. }

  105. var loop = setInterval(function () {
  106.         c = getClock();

  108.         columns.forEach(function (ele, i) {
  109.                 var n = +c[i];
  110.                 var offset = -n * size;
  111.                 ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))';
  112.                 Array.from(ele.children).forEach(function (ele2, i2) {
  113.                         ele2.className = 'num ' + getClass(n, i2);
  114.                 });
  115.         });
  116. }, 200 + Math.E * 10);
  117. </script>
  118. </body>
  119. </html>