<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {
margin: 0 auto;
text-align: center;
}
figure {
margin: 0;
padding: 0;
}
article {
position: absolute;
height: 160px;
top: 40%;
left: 50%;
margin-top: -85px;
margin-left: -77px;
}
div {
margin: 2px;
}
#line1 {}
#line2 {}
#line2 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line1 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line3 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line4 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line5 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line6 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line7 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
#line8 div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
div {
width: 5px;
height: 5px;
display: inline-block;
background-color: black;
}
button {
width: 120px;
}
p a {
padding: 20px;
color: cornflowerblue;
/*text-decoration: none;*/
}
aside {
margin-top: 50px;
}
</style>
<body>
<article>
<figure id="line1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line7">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line8">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line9">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
<figure id="line10">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
</article>
<script>
var arr = [
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 1, 1, 0, 0, 0, 0]
]
console.log(arr[4]);
var i = 0;
var j = 0;
while(i <= 9) {
j = 0;
//打色
//document.getElementById("line1").getElementsByTagName("div")[6].style.backgroundColor = "red"
while(j <= 6) {
console.log("line" + (i + 1))
console.log(arr[i][j])
if(arr[i][j] == 0) {
document.getElementById("line" + (i + 1)).getElementsByTagName("div")[j].style.backgroundColor = "white"
} else {
document.getElementById("line" + (i + 1)).getElementsByTagName("div")[j].style.backgroundColor = "red"
}
j++;
}
i++
}
console.log()
</script>
</body>
</html>
数字
digit =
[
// [
// [0,0,0,1,1,1,0,0,0],
// [0,0,1,1,0,1,1,0,0],
// [0,1,1,0,0,0,1,1,0],
// [0,1,1,0,0,0,1,1,0],
// [0,1,1,0,0,0,1,1,0],
// [0,1,1,0,0,0,1,1,0],
// [0,1,1,0,0,0,1,1,0],
// [0,1,1,0,0,0,1,1,0],
// [0,0,1,1,0,1,1,0,0],
// [0,0,0,1,1,1,0,0,0]
// ],//0
[
[0,0,1,1,1,1,1,1,1,0,0,0],
[0,0,0,0,0,0,0,1,1,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,0,0,0,1,1,0,0,0],
[0,0,0,0,0,0,0,1,1,0,0,0],
[0,0,1,1,0,0,0,1,1,0,0,0],
[0,0,0,1,1,1,1,1,0,0,0,0]
],//3
[
[0,0,0,1,1,1,1,1,0,0,0,0],
[0,0,1,1,0,0,0,1,1,0,0,0],
[0,0,0,0,0,0,0,1,1,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0,0,0],
[0,0,0,1,1,0,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0],
[0,0,1,1,0,0,0,1,1,0,0,0],
[0,0,1,1,1,1,1,1,1,0,0,0]
],//2
[
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,1,1,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,1,1,1,1,1,1,1,0,0,0]
],//1
[
[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,1,0,0,0,0,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,0,0],
[0,0,1,0,0,0,0,0,0,1,0,0],
[1,1,1,0,1,0,0,1,0,1,1,1],
[0,0,1,0,0,1,1,0,0,1,0,0],
[1,1,1,0,0,0,0,0,0,1,1,1],
[0,0,0,1,1,1,1,1,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0]
],//Cat
// [
// [0,0,0,0,1,1,0],
// [0,0,0,1,1,1,0],
// [0,0,1,1,1,1,0],
// [0,1,1,0,1,1,0],
// [1,1,0,0,1,1,0],
// [1,1,1,1,1,1,1],
// [0,0,0,0,1,1,0],
// [0,0,0,0,1,1,0],
// [0,0,0,0,1,1,0],
// [0,0,0,1,1,1,1]
// ],//4
// [
// [1,1,1,1,1,1,1],
// [1,1,0,0,0,0,0],
// [1,1,0,0,0,0,0],
// [1,1,1,1,1,1,0],
// [0,0,0,0,0,1,1],
// [0,0,0,0,0,1,1],
// [0,0,0,0,0,1,1],
// [0,0,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [0,1,1,1,1,1,0]
// ],//5
// [
// [0,0,0,0,1,1,0],
// [0,0,1,1,0,0,0],
// [0,1,1,0,0,0,0],
// [1,1,0,0,0,0,0],
// [1,1,0,1,1,1,0],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [0,1,1,1,1,1,0]
// ],//6
// [
// [1,1,1,1,1,1,1],
// [1,1,0,0,0,1,1],
// [0,0,0,0,1,1,0],
// [0,0,0,0,1,1,0],
// [0,0,0,1,1,0,0],
// [0,0,0,1,1,0,0],
// [0,0,1,1,0,0,0],
// [0,0,1,1,0,0,0],
// [0,0,1,1,0,0,0],
// [0,0,1,1,0,0,0]
// ],//7
// [
// [0,1,1,1,1,1,0],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [0,1,1,1,1,1,0],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [0,1,1,1,1,1,0]
// ],//8
// [
// [0,1,1,1,1,1,0],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [1,1,0,0,0,1,1],
// [0,1,1,1,0,1,1],
// [0,0,0,0,0,1,1],
// [0,0,0,0,0,1,1],
// [0,0,0,0,1,1,0],
// [0,0,0,1,1,0,0],
// [0,1,1,0,0,0,0]
// ],//9
// [
// [0,0,0,0,0,0,0],
// [0,0,0,0,0,0,0],
// [0,1,1,0,0,0,0],
// [0,1,1,0,0,0,0],
// [0,0,0,0,0,0,0],
// [0,0,0,0,0,0,0],
// [0,1,1,0,0,0,0],
// [0,1,1,0,0,0,0],
// [0,0,0,0,0,0,0],
// [0,0,0,0,0,0,0]
// ],//:
];