JavaScript代码：
window.onload = function () { var lis = document.getElementsByTagName('li'); var input = document.getElementById('reset'); var content = document.getElementsByClassName('content')[0]; var body = document.getElementsByTagName('body')[0]; var imgs = document.getElementsByTagName('img'); var loading = document.getElementById('loading'); var rand = random(); for (var i = 0; i < lis.length; i ++) { lis[i].index = i; lis[i].onclick = function () { setTimeout(changeBackground, 1000); var thisIndex = this.index + 1; if (thisIndex === rand) { content.innerHTML = '你选择的是第' + thisIndex + '个元素-中奖了</br>中奖元素是第' + rand + "个"; setTimeout(changeBody, 400); } else { content.innerHTML = '你选择的是第' + thisIndex + '个元素-没中奖</br>中奖元素是第' + rand + "个"; } } lis[i].onmouseover = function () { for (var n = 0; n < lis.length; n ++) lis[n].style.background = ''; this.style.background = '#ccc'; } lis[i].onmouseout = function () { for (var c = 0; c < lis.length; c ++) this.style.background = ''; } } input.onmouseover = function () { this.style.background = '#EEC900'; } input.onmouseout = function () { this.style.background = ''; } input.onclick = function () { window.location.reload('./lottery.html'); } function changeBackground () { for (var j = 0; j < imgs.length; j ++) { imgs[j].src = './images/box.gif'; if (j == rand) { imgs[j].src = './images/oncube.gif'; } else if (rand == 9) { imgs[rand].src = './images/oncube.gif'; } } } function changeBody () { body.style.background = 'greenyellow'; } function random () { var rand = Math.ceil(Math.random()*9); if (rand == 0) random(); return rand; } setTimeout(function () { loading.style.visibility = 'hidden'; }, 400) } /* document.onreadystatechange = function () { if (document.readyState == 'complete') { console.log("loading over"); loading.style.visibility = 'hidden'; } } */HTML：
<div id="loading"><img src="./images/Ellipsis.gif" alt=""></div> <div class="container"> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <li><img src="./images/cube.gif" alt=""></li> <div class="content" style="color:blue; font-size:14px;"></div> <div id="reset">Reset</div> </div>CSS：
.container{height:270px; width:270px; margin:auto; left:0; top:0; bottom:0; right:0; position:fixed; text-align:center; color:white;} .container li{height:85px; width:84px; border-radius:2px; margin:1px; display:inline-block; cursor:pointer;} img{height:100%; width:100%;} .active{background-color:red; color:#CDCDC1;} #loading{position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; background:greenyellow;} #loading img{position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; height:60px; width:60px;} #reset{background:#EE9A00; height:50px; border-radius:5px; line-height:50px; cursor:pointer;}
转载于:https://www.cnblogs.com/phpcurd/p/8817730.html
相关资源：各显卡算力对照表！