/
index.html
112 lines (88 loc) · 2.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1">
<meta name="author" content="ParaZz">
<title>Fun With JS</title>
<style>
.caltab td {
padding:30px;
border:2px solid black;
}
.caltab table {
border:2px solid black;
margin:auto;
margin-top:100px;
}
td {
width:20px;
}
label {
min-width:50px;
background-color:teal;
margin:3%;
font-size: 25px;
color:white;
padding:1%;
border:1px outset white;
transition: ease-in-out, background-color 1s ease-in-out;
transition: ease-in-out,font-size 0.3s ease-in-out;
}
input {
display: none;
}
td {
transition: ease-in-out, background-color 0.2s ease-in-out;
}
label:hover {
background-color: blueviolet;
font-size: 27px;
}
</style>
</head>
<body>
<div class="caltab">
<table>
<tr><th colspan="2"><label><input type="button" id="green" value="0" onclick="changeColor('green');"> Alpha </label></th>
<th colspan="3"><label><input type="button" id="red" value="1" onclick="changeColor('red');"> Beta </label></th>
<th colspan="2"><label><input type="button" id="blue" value="2" onclick="changeColor('blue');"> Gamma</label></th></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row5"></tr>
</table>
</div>
<script>
function randtable() {
for (q=1;q<6;q++) {
document.getElementById("row"+q).innerHTML="";
}
var p=1;
var addIn = document.createDocumentFragment();
for(i=1; i < 6; i++){
for(j=0; j<7;j++) {
var newDiv = document.createElement('td');
newDiv.id = 'r'+p;
addIn.appendChild(newDiv);
document.getElementById("row"+i).appendChild(addIn);
p++
}
}
}
var pre = ["#","#f","#033"]
v=2;
function changeColor(clr) {
var color = document.getElementById(clr);
v = color.value;
}
function randcolor() {
for (n=1;n<35;n++) {
document.getElementById("r"+n).style.backgroundColor = pre[v]+Math.floor(Math.random() * (100 - 1)) + 1;
}
}
window.setInterval(randtable,400);
window.setInterval(randcolor,400);
</script>
</body>
</html>