js小效果-双色球

时间:2023-01-08 08:38:57
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width:50px;
height:50px;
border-radius: 50px;
background: red;
float:left;
margin-left: 10px;
line-height: 50px;
text-align: center;
}
</style>
<script>
function addZero(n){
return n<10 ? '0'+n : ''+n;
};
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n);
};
function findInArr(n,arr){
for(var i=0;i<arr.length;i++){
if(n==arr[i]){
return true;
}
}
return false;
}
window.onload=function(){
var oBtn=document.getElementById('btn');
var aDiv=document.getElementsByTagName('div');
var timer=null;
function show(){
var arr=[];
while(arr.length<6){
var n=addZero(rnd(1,34));
if(findInArr(n,arr)==false){
arr.push(n);
}
};
for(var i=0;i<aDiv.length;i++){
aDiv[i].innerHTML=arr[i];
}
setTimeout(function(){
clearTimeout(timer);
},1000)
}
show();
oBtn.onclick=show;
}
</script>
</head>
<body>
<input type="button" value="随机" id="btn" />
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>