由于喜欢接触单片机之类的,所以对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 渲染一下不同的单元格,实现一个动态的显示效果
#最后看一下效果图点我查看
是不是觉得很丑,其实我也觉得很丑,其实这个是我用另外一个差不多的网页画出来的点我查看
画的很随意,所以就比较丑