<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>抽奖</title> </head> <style type="text/css"> .box { width: 340px; height: 340px; border: 1px pink solid; margin: 100px; position: relative; } .box div { width: 100px; height: 100px; background-color: aqua; /* margin: 10px; */ line-height: 100px; text-align: center; } .item1 { position: absolute; top: 10px; left: 10px; } .item2 { position: absolute; top: 10px; left: 120px; } .item3 { position: absolute; top: 10px; left: 230px; } .item4 { position: absolute; top: 120px; left: 230px; } .item5 { position: absolute; top: 230px; left: 230px; } .item6 { position: absolute; top: 230px; left: 120px; } .item7 { position: absolute; top: 230px; left: 10px; } .item8 { position: absolute; top: 120px; left: 10px; } .box strong { display: block; width: 100px; height: 100px; background-color: yellow; line-height: 100px; text-align: center; position: absolute; top: 120px; left: 120px; } </style> <body> <div class="box"> <div class="item1">扣除10积分</div> <div class="item2">奖励一百积分</div> <div class="item3">扣除一天</div> <div class="item4">扣除零积分</div> <div class="item5">奖励零分</div> <div class="item6">奖五十分</div> <div class="item7">放假一天</div> <div class="item8">放假半天</div> <strong>点击抽奖</strong> </div> <script type="text/javascript"> let but = document.getElementsByTagName("strong")[0]; let box = document.getElementsByClassName("box")[0]; let list = box.getElementsByTagName("div"); let k = 0; let time = 500; let int; let count = 0; let rom = 0; but.onclick = eve; function eve() { list[k].style.backgroundColor = "pink"; int = setInterval(scrolls, time); rom = Math.floor(Math.random() * list.length); console.log(rom); but.onclick = null; } function scrolls() { if (k < list.length - 1) { k++; list[k - 1].style.backgroundColor = "aqua"; list[k].style.backgroundColor = "pink"; } else { k = 0; count++; list[list.length - 1].style.backgroundColor = "aqua"; list[k].style.backgroundColor = "pink"; } if (count < 5) { if (time <= 100) { time = 100; } else { time -= 20; } } else { if (time >= 500) { time = 500; } else { time += 20; } } if (count > 6 && rom == k) { clearInterval(int); count = 0; rom = 0; time = 0; but.onclick = eve; let text = list[k].innerHTML; setTimeout(function () { alert("恭喜您获得" + text) }, 100) } else { clearInterval(int); int = setInterval(scrolls, time); } } </script> </body> </html>
