0-9 倒計時 8x8 點陣 實現
阿新 • • 發佈：2018-11-14
由於喜歡接觸微控制器之類的,所以對8x8 的點陣還是比較著迷,但是至今都還沒有完整的實現這個硬體上的功能(因為自己有點菜),所以就在HTML 上先實現這個功能,不過這個功能看起來還是有點垃圾的,沒什麼用,但是還是先寫成部落格記錄下來,等到哪天突然又有時間了, 就好好完善一下!
#老規矩 先貼上程式碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>0-9 倒計時 8x8 點陣 實現</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script> <style> /*不允許頁面選中*/ body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /*設定表格的大小*/ table { width: 500px; height: 500px; } </style> </head> <body onload="genTable()"> <table id="table" border="1em" cellspacing="0" cellpadding="0"></table> <div> <input type="number" placeholder="請輸入0-9的數字" onchange="initTime(this)"> <button onclick="TimeOut()"> 開始倒計時</button> </div> </body> <script> var tArray = new Array(), color = "D25FFF",//構建時td顯示的顏色 row = 8,//構建時建立的多少行 col = 8,//構建時建立多少列 timeOut = 9;//倒計時的時間 var data = [ ["00111100", "01000010", "01000010", "01000010", "01000010", "01000010", "01000010", "00111100",]//0 , ["00011000", "00111000", "00011000", "00011000", "00011000", "00011000", "00011000", "00111100"]//1 , ["00111100", "00000100", "00000100", "00000100", "00111100", "00100000", "00100000", "00111100"]//2 , ["00111100", "00000100", "00000100", "00000100", "00111100", "00000100", "00000100", "00111100"]//3 , ["00000000", "01001000", "01001000", "01001000", "01111110", "00001000", "00001000", "00000000"]//4 , ["00111100", "00100000", "00100000", "00111100", "00000100", "00000100", "00000100", "00111100"]//5 , ["00111110", "00100000", "00100000", "00100000", "00111110", "00100010", "00100010", "00111110"]//6 , ["00111100", "00000100", "00000100", "00000100", "00000100", "00000100", "00000100", "00000100"]//7 , ["01111110", "01000010", "01000010", "01111110", "01000010", "01000010", "01000010", "01111110"]//8 , ["01111110", "01000010", "01000010", "01111110", "00000010", "00000010", "00000010", "01111110"]//9 ]; /** * 初始化倒計時的時間 * @author Lengff */ function initTime(input) { var value = input.value; if (value > 9 || value < 0) { alert("輸入不合法!"); input.value = ''; } else { timeOut = value; } } /** * 構建表格 * @author Lengff */ function genTable() { $("#table").html(''); var html = '', tr = "<tr>", trr = "</trr>", td = "<td>", tdd = "</td>"; for (var i = 0; i < row; i++) { html += tr; for (var j = 0; j < col; j++) { html += td + " " + tdd; } html += trr; } $("#table").append(html); Coloring(); } /** * 上色 * @author Lengff */ function Coloring() { var trs = $("table").find('tr'); for (var i = 0; i < trs.length; i++) { tArray[i] = new Array(); var tr = $(trs[i]).find('td'); for (var j = 0; j < tr.length; j++) { tArray[i][j] = $(tr[j]); tArray[i][j].attr('bgcolor', color); } } } /** * 變成數字 * @author Lengff */ function changeNum(num) { color = randomHexColor(); for (var i = 0; i < tArray.length; i++) { for (var j = 0; j < tArray[i].length; j++) { if (num[i][j] == 1) { tArray[i][j].attr('bgcolor', color); } else { tArray[i][j].attr('bgcolor', "#ffffff"); } } } } /** * 倒計時開始 * @author Lengff */ function TimeOut() { //只要倒計時未結束就接著倒計時 if (timeOut != -1) { setTimeout(function () { changeNum(data[timeOut]); timeOut--; TimeOut(); }, 1000); } else { //如果倒計時結束了,就重置計時器 timeOut = 9; } } /** * 隨機生成十六進位制顏色 */ function randomHexColor() { //生成ffffff以內16進位制數 var hex = Math.floor(Math.random() * 16777216).toString(16); //while迴圈判斷hex位數，少於6位前面加0湊夠6位 while (hex.length < 6) { hex = '0' + hex; } //返回‘#'開頭16進位制顏色 return '#' + hex; } </script> </html>
#講一下原理,
其實原理很簡單, 就是一個table 然後就給table 渲染一下不同的單元格,實現一個動態的顯示效果
#最後看一下效果圖點我檢視
是不是覺得很醜,其實我也覺得很醜,其實這個是我用另外一個差不多的網頁畫出來的點我檢視
畫的很隨意,所以就比較醜