原生js 实现见得的双色球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{width:40px;height:40px;display:block;border-radius:40px;background:red;float:left;margin:5px;opacity:0.8;text-align:center;line-height:40px;color:#fff;font-size:28px;}
#box>span:nth-child(7){background:blue;}
button{margin-top:10px;margin-left:10px;width:70px;height:30px;}
</style>
</head>
<body>
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<button>双色球</button>
<button>大乐透</button>
<button>停止</button>
<button>清空</button>
</div>
<script>
var span = document.getElementsByTagName("span")
, btn = document.getElementsByTagName("button")
, arr = null
, brr = null
, timer = null;
btn[0].onclick = function(){
span[5].style.background = "red";
if(timer){
clearInterval(timer);
}
timer = setInterval("fn(6)",200);
}
//开始
btn[1].onclick = function (){
span[5].style.background = "blue";
//解决再次点击开始时的bug
if(timer){
clearInterval(timer);
}
//定时执行
timer = setInterval("fn(5)",200);
}
//停止
btn[2].onclick = function(){
clearInterval(timer);
}
//清空
btn[3].onclick = qk;
//获取val(5/6)个红球
function fn(val){
arr=[];
//随机获取5个红球
for(var i=0;i<val;i++){
if(val == 5){
var rand=Math.floor(Math.random()*35+1);
}else{
var rand=Math.floor(Math.random()*33+1);
}
if(arr.indexOf(rand) == -1){
arr.push(rand);
}else{
i--;
}
}
//排序
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]>arr[j]){
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
if(val == 5){
fn1(2);
}else{
fn1(1);
}
}
//获取1/2个篮球
function fn1(val){
brr = [];
//随机获取val个数字
for(var i=0;i<val;i++){
if(val == 2){
var rand=Math.floor(Math.random()*13+1);
}else{
var rand=Math.floor(Math.random()*16+1);
}
if(brr.indexOf(rand) == -1){
brr.push(rand)
}else{
i--;
}
}
//排序
for(var i=0;i<brr.length;i++){
for(var j=i+1;j<brr.length;j++){
if(brr[i]>brr[j]){
var temp=brr[i];
brr[i]=brr[j];
brr[j]=temp;
}
}
}
//将val个篮球brr压栈到arr;
for(var i=0;i<brr.length;i++){
arr.push(brr[i]);
}
//将arr中的7位数字写入span
for(var i=0;i<span.length;i++){
span[i].innerHTML=arr[i];
}
}
function qk(){
clearInterval(timer);
for(var i=0;i<span.length;i++){
span[i].innerHTML = "";
}
}
</script>
</body>
</html>