JavaScript 基于原生JS开发抽奖游戏demo

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;}