js抽奖小程序代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: auto;
padding: auto;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 50px;
background-color: #FAEBD7;
text-align: center;
line-height: 50px;
}
.box button {
display: block;
margin: 0px auto;
width: 100px;
height: 50px;
background-color: rosybrown;
}
</style>
<body>
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
<div class="box">
<button onclick="changeButton()">抽奖</button>
</div>
</body>
</html>
<script>
var table = document.querySelector("table");
var arr = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16]
];
function add() {
for(var i = 0; i < arr.length; i++) {
var tr = table.insertRow(i);
for(var j = 0; j < arr[i].length; j++) {
var td = tr.insertCell(j);
td.innerHTML = arr[i][j];
}
}
}
function add1(){
var arr1 = [1,2,3,4,5,6,7,8,
9,10,11,12,13,14,15,16,
17,18,19];
var rowlength = Math.ceil(arr1.length/4);
var num = 0;
for(let i =0;i<rowlength;i++){
var tr = table.insertRow(i);
for (var j = 0; j < 4; j++) {
if (num<arr1.length) {
var td = tr.insertCell(j);
td.innerHTML = arr1[num++];
}
}
}
}
add1();
function repeat() {
for(var i = 0; i < table.rows.length; i++) {
for(var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].style.backgroundColor = "#FAEBD7";
}
}
var trIndex = Math.floor(Math.random() * table.rows.length);
var tdIndex = Math.floor(Math.random() * table.rows[trIndex].cells.length)
var cell = table.rows[trIndex].cells[tdIndex];
cell.style.backgroundColor = "red";
}
var button = document.querySelector("button");
var flag = false;
var mySetInterval;
function changeButton() {
if(flag == false) {
button.innerHTML = "结束";
mySetInterval = setInterval("repeat()", 100);
flag = true;
} else {
button.innerHTML = "抽奖";
clearInterval(mySetInterval);
flag = false;
}
}
</script>
代码效果展示