<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙色球</title>
<style type="text/css">
#wrap {
width: 800px;
padding: 50px;
margin: 20px auto;
background: darkslategray;
text-align: center;
}
button {
width: 200px;
height: 50px;
outline: none;
font-size: 2rem;
border-radius: 20px;
margin: 50px 5px;
}
.numbox {
width: 700px;
/*height: 500px;*/
background: white;
margin: auto;
}
</style>
</head>
<body>
<div id="wrap">
<button>隨機一注</button>
<button>隨機三注</button>
<button>隨機五注</button>
<div id="numbox"></div>
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName('button');
btn[0].onclick = oneRandom;
btn[1].onclick = twoRandom;
btn[2].onclick = fiveRandom;
var numbox = document.getElementById('numbox');
// numbox.style.background = 'white';
numbox.className = 'numbox';
function fiveRandom() {
var tim = setInterval(function() {
numbox.innerHTML = '';
for(j = 0; j < 5; j++) {
one();
}
}, 10);
setTimeout(function() {
clearInterval(tim);
}, 800);
}
function twoRandom() {
var tim = setInterval(function() {
numbox.innerHTML = '';
for(j = 0; j < 3; j++) {
one()
}
}, 10);
setTimeout(function() {
clearInterval(tim);
}, 800);
}
function oneRandom() {
var tim = setInterval(function() {
numbox.innerHTML = '';
one();
}, 10);
setTimeout(function() {
clearInterval(tim);
}, 800);
}
function one() {
var arr1 = [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];
var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
var arr = [];
for(i = 0; i < 6; i++) {
var box = document.createElement('div');
box.style.width = '80px';
box.style.height = '80px';
box.style.display = 'inline-block';
box.style.border = '1px solid red';
box.style.boxShadow = '5px 5px 10px gray';
box.style.borderRadius = '50%';
box.style.background = 'red';
box.style.fontSize = '2rem';
box.style.color = 'white';
box.style.textAlign = 'center';
box.style.lineHeight = '80px';
box.style.margin = '20px 5px';
numbox.appendChild(box);
var num = Math.floor(Math.random() * arr1.length);
arr.push(arr1[num]);
box.innerText = arr1[num];
arr1[num] = arr1[arr1.length - 1];
arr1.pop();
}
var box1 = document.createElement('div');
box1.style.width = '80px';
box1.style.height = '80px';
box1.style.display = 'inline-block';
box1.style.border = '1px solid blue';
box1.style.boxShadow = '5px 5px 10px gray';
box1.style.borderRadius = '50%';
box1.style.background = 'blue';
box1.style.fontSize = '2rem';
box1.style.color = 'white';
box1.style.textAlign = 'center';
box1.style.lineHeight = '80px';
box1.style.margin = '20px 5px';
numbox.appendChild(box1);
var num2 = Math.floor(Math.random() * 16);
box1.innerText = arr2[num2];
var br_ = document.createElement('br');
numbox.appendChild(br_);
}
</script>
</body>
</html>