随机抽奖

界面图片:

HTML代码:

<div id="title">
    抽奖
</div>
<div id="luck">
    幸运儿
</div>
<ul id="box">
    <li>1号</li>
    <li>2号</li>
    <li>3号</li>
    <li>4号</li>
    <li>5号</li>
    <li>6号</li>
    <li>7号</li>
    <li>8号</li>
    <li>9号</li>
    <li>10号</li>
    <li>11号</li>
    <li>12号</li>
    <li>13号</li>
    <li>14号</li>
    <li>15号</li>
    <li>16号</li>
    <li>再试一次</li>
</ul>
<div id="text_box">就决定是</div><p id="text"></p><div id="text_box2">了!</div>

JS代码:

window.onload=function () {
    var box = document.getElementById("box");      
    var name = box.getElementsByTagName("li");
    var yy = document.getElementById("title");
    var luck = document.getElementById("luck");
    var text=document.getElementById("text");
    yy.onclick = function () {                     
        time = setInterval(run, 50);
        function run() {
            numb = Math.floor(Math.random() * 17);
            for (var i = 0; i < name.length; i++) {
                name[i].style.borderColor = "white";
                text.innerText="";
            }
            name[numb].style.borderColor = "yellow";
            return time;
        }
    };
    luck.onclick=function () {
        clearInterval(time);
        text.innerText=name[numb].innerText;
        text.style.color="gold";
    }

}












猜你喜欢

转载自blog.csdn.net/weixin_42413651/article/details/80697063
今日推荐