<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #dalor{ width: 400px; height: 400px; position: absolute; margin-top: -200px; margin-left: -200px; top: 50%; left: 50%; } #dalor div{ position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; } #dalor_go{ position: absolute; width: 200px; height: 200px; top: 100px; left: 100px; line-height: 200px; background: red; color: white; text-align: center; border: none; cursor: pointer; } .dalor1{ top: 0; left: 0; background: #FF9999; } .dalor2{ top: 0; left: 100px; background: #CDCD66; } .dalor3{ top: 0; left: 200px; background: #FF9999; } .dalor4{ top: 0; left: 300px; background: #CDCD66; } .dalor5{ top: 100px; left: 300px; background: #FF9999; } .dalor6{ top: 200px; left: 300px; background: #CDCD66; } .dalor7{ top: 300px; left: 300px; background: #FF9999; } .dalor8{ top: 300px; left: 200px; background: #CDCD66; } .dalor9{ top: 300px; left: 100px; background: #FF9999; } .dalor10{ top: 300px; left: 0; background: #CDCD66; } .dalor11{ top: 200px; left: 0; background: #FF9999; } .dalor12{ top: 100px; left: 0; background: #CDCD66; } .blue{ background: #40FFE5; } </style> </head> <body> <div id="dalor"> <input id="dalor_go" type="button" value="go!"> <div class="dalor1 blue">1</div> <div class="dalor2">2</div> <div class="dalor3">3</div> <div class="dalor4">4</div> <div class="dalor5">5</div> <div class="dalor6">6</div> <div class="dalor7">7</div>s <div class="dalor8">8</div> <div class="dalor9">9</div> <div class="dalor10">10</div> <div class="dalor11">11</div> <div class="dalor12">12</div> </div> <script> window.οnlοad=function () { var odar=document.getElementById("dalor").getElementsByTagName("div"); var odarGo=document.getElementById("dalor_go"); var suzi=0; odarGo.addEventListener("click",function () { var odartime=Math.ceil(Math.random()*24+24); var xunuantimu=setInterval(function () { odar[suzi%12].classList.remove("blue"); // 当suzi=0时,取余为0,当为1时,取余为1以此类推,但当达到12时又回到了0~12;它会移除赋予它的颜色 odar[(++suzi)%12].classList.add("blue"); // 当suzi=0时,取余为1,当为1时,取余为2以此类推,它会赋予一个颜色,使每次转动时会变一下背景 if (suzi%odartime==0){ // 当suzi与随机数的相等时,清空定时器 clearInterval(xunuantimu); } },100); }); } </script> </body> </html>
大转盘2(简易)
最新推荐文章于 2019-01-28 21:54:07 发布