双色球
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .big{ width: 750px; height: 100px; /* border: 1px solid; */ margin: 50px auto; } .b{ width: 100px; height: 100px; /* border: 1px solid; */ display: inline-block; border-radius: 50%; background: red; position: relative; text-align: center; line-height: 100px; font-size: 50px; font-weight: bold; color: white; } .suparblock{ background: blue; } span{ font-size: 40px; text-align: center; position: absolute; color: white; font-weight: bold; top: 22px; left: 27px; z-index: 5; } button{ position: relative; left: 320px; top: 20px; } </style> </head> <body> <div class="big"> <div class="b" id="div0"></div> <div class="b" id="div1"></div> <div class="b" id="div2"></div> <div class="b" id="div3"></div> <div class="b" id="div4"></div> <div class="b" id="div5"></div> <div class="b suparblock" id="div6"></div> <button id="startbtn">开始</button> <button id="endbtn">停</button> </div> <script> let b = document.getElementsByClassName('b'); let startbtn = document.getElementById("startbtn") let endbtn = document.getElementById("endbtn"); let getnum = function(){ let arr=[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,33]; let max=arr.length; let rand = Math.floor(Math.random()*max); //输出0-32的数 return arr[rand]; } let bluegetnum = function(){ let arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; let max=arr.length; let rand = Math.floor(Math.random()*max); //输出0-32的数 return arr[rand]; } // let start = function(){ // } let stopTimer ; startbtn.onclick = function(){ startbtn.disabled = true ; endbtn.disabled = false; stopTimer = setInterval(function(){ // span='' div0.innerHTML = getnum(); div1.innerHTML = getnum(); div2.innerHTML = getnum(); div3.innerHTML = getnum(); div4.innerHTML = getnum(); div5.innerHTML = getnum(); div6.innerHTML = bluegetnum(); },100) }; endbtn.onclick = function(){ clearInterval(stopTimer); startbtn.disabled = false; endbtn.disabled = true; } </script> </body> </html>