<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> #btn { height: 30px; width: 100px; border: 1p ...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#btn {
height: 30px;
width: 100px;
border: 1px solid red;
outline: none;
}
#box {
margin-top: 20px;
color: #0000FF;
letter-spacing: 5px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隨機一註" />
<div id="box"></div>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var box = document.getElementById("box");
//生成隨機數
function randomNumber(max, min) {
return parseInt(Math.random() * (max - min + 1) + min);
}
//隨機生成數組，並且每個數字不相同
function createArray() {
var arr=[];
while(arr.length < 5) {
num=randomNumber(30,1);
for (var i=0;i<arr.length;i++) {
if (num==arr[i]) {
break;
}
}
if (i==arr.length) {
arr.push(num);
}
}
return arr;
}
//點擊觸發事件
var timer=null;
function timerFn(){
var time=0;
timer=setInterval(function(){
arr=createArray();
time+=100;
if (time>1000) {
clearInterval(timer);
}
box.innerHTML=arr;
},100)
}
timerFn();
btn.onclick=timerFn;
</script>
</html>
