如何使用 392 个格子做个点阵时钟？

点阵时钟

关于香菇要开始水文了这件事情，请无论如何不要放在心上(╯‵□′)╯︵┻━┻

下边代码的作用就是在网页（DHTML）中制作一个“真正意义”上的点阵显示时钟。没错！就像 LED 点阵显示器那样，每一个“点”都是一个独立的“元件”，通过“明暗”变化显示拼出数字。

实际上“显示”部分由 8 个 DIV 组成，每个 DIV 中有 7 * 7 = 49 个 SPAN 格子排列成正方形，通过 js 脚本控制每个格子的背景色变化，最终形成文字图案。

由于懒癌发作，所以没写生成 DOM 的 js 脚本（写了的话代码篇幅会急！剧！缩小），直接复制粘贴出了 DOM 结构。

<!DOCTYPE html>
<!--by siitake.cn-->
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gu Clock.</title>
    <style type="text/css">
    body{background-color:black;}
    #timeBox {width:84vw;height:10.5vw;margin:auto;margin-top:35vh;}
    #t1{left:0;}#t2{left:10.5vw;}#t3{left:21vw;}#t4{left:31.5vw;}#t5{left:42vw;}#t6{left:52.5vw;}#t7{left:63vw;}#t8{left:73.5vw;}
    .ff{position:relative;width:10.5vw;}
    .ff span{display:block;position:absolute;width:1.5vw;height:1.5vw;background:black;border:solid #111 1px;/*border-radius:1.5vw;*/transition:background-color 0.5s;}
    .x01{top:0;}.x02{top:1.5vw;}.x03{top:3vw;}.x04{top:4.5vw;}.x05{top:6vw;}.x06{top:7.5vw;}.x07{top:9vw;}
    .y01{left:0;}.y02{left:1.5vw;}.y03{left:3vw;}.y04{left:4.5vw;}.y05{left:6vw;}.y06{left:7.5vw;}.y07{left:9vw;}
    </style>
  </head>
<body onload="$.setSet()" onresize="$.setSet()">
  <div id="timeBox">
    <div id="t1" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t2" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t3" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t4" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t5" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t6" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t7" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
    <div id="t8" class="ff">
      <span class="x01 y01"></span><span class="x01 y02"></span><span class="x01 y03"></span><span class="x01 y04"></span><span class="x01 y05"></span><span class="x01 y06"></span><span class="x01 y07"></span>
      <span class="x02 y01"></span><span class="x02 y02"></span><span class="x02 y03"></span><span class="x02 y04"></span><span class="x02 y05"></span><span class="x02 y06"></span><span class="x02 y07"></span>
      <span class="x03 y01"></span><span class="x03 y02"></span><span class="x03 y03"></span><span class="x03 y04"></span><span class="x03 y05"></span><span class="x03 y06"></span><span class="x03 y07"></span>
      <span class="x04 y01"></span><span class="x04 y02"></span><span class="x04 y03"></span><span class="x04 y04"></span><span class="x04 y05"></span><span class="x04 y06"></span><span class="x04 y07"></span>
      <span class="x05 y01"></span><span class="x05 y02"></span><span class="x05 y03"></span><span class="x05 y04"></span><span class="x05 y05"></span><span class="x05 y06"></span><span class="x05 y07"></span>
      <span class="x06 y01"></span><span class="x06 y02"></span><span class="x06 y03"></span><span class="x06 y04"></span><span class="x06 y05"></span><span class="x06 y06"></span><span class="x06 y07"></span>
      <span class="x07 y01"></span><span class="x07 y02"></span><span class="x07 y03"></span><span class="x07 y04"></span><span class="x07 y05"></span><span class="x07 y06"></span><span class="x07 y07"></span>
    </div>
  </div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$.extend({
  creatLattice:function(box) {
  // 不明意义的预留函数...
  // 大概是用来创建timeBox的dom结构但是懒得写了
},
setLattice:function(objs, objt, color) {
  // 设置点阵明暗
  for(i = 0; i < objs.length; i++) {
    if(objt[i] == 1) {
      $(objs[i]).css('background-color', color);
    } else {
      $(objs[i]).css('background-color', 'black');
    }
  }
},
setSet:function() {
  // 设置timeBox位置
  var vh = $(document).height();
  var th = $('#timeBox').height();
  $('#timeBox').css('margin-top', (vh - th) / 2 + 'px');
},
startTime:function() {
  // 开始走时
  var today = new Date()
  var h = today.getHours()
  var m = today.getMinutes()
  var s = today.getSeconds()
  $.setLattice(TS[0], NS[(h - (h % 10)) / 10], color);
  $.setLattice(TS[1], NS[h % 10], color);
  $.setLattice(TS[2], NS[10], color);
  $.setLattice(TS[3], NS[(m - (m % 10)) / 10], color);
  $.setLattice(TS[4], NS[m % 10], color);
  $.setLattice(TS[5], NS[10], color);
  $.setLattice(TS[6], NS[(s - (s % 10)) / 10], color);
  $.setLattice(TS[7], NS[s % 10], color);
  t = setTimeout('$.startTime()', 500);
}
});
// 7x7数字点阵数据↓↓↓↓↓
var n0 = new Array(0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0);
var n1 = new Array(0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0);
var n2 = new Array(0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0);
var n3 = new Array(0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0);
var n4 = new Array(0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0);
var n5 = new Array(0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0);
var n6 = new Array(0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0);
var n7 = new Array(0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0);
var n8 = new Array(0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0);
var n9 = new Array(0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0);
var nC = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
var nB = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
var NS = new Array(n0, n1, n2, n3, n4, n5, n6, n7, n8, n9, nC, nB);
// 7x7数字点阵数据↑↑↑↑↑
var TS = new Array($('#t1').children(), $('#t2').children(), $('#t3').children(), $('#t4').children(), $('#t5').children(), $('#t6').children(), $('#t7').children(), $('#t8').children());
console.warn('GU: Clock Ready! <siitake.cn>');
var color = 'mediumspringgreen';
$.startTime();
</script>
</body>
</html>

写在后面：在浏览器中打开并全屏显示后，看起来还是挺不错的（虽然没什么卵用233）。

版权声明：原创内容未经允许请勿转载。

标签: none

评论已关闭