| <!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 stopTimer ; | |
| startbtn.onclick = function(){ | |
| startbtn.disabled = true ; | |
| endbtn.disabled = false; | |
| stopTimer = setInterval(function(){ | |
| 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> |
原文：https://www.cnblogs.com/tcq43356/p/11489205.html