火影忍者抽奖活动升级版_zhou125disorder_

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖活动</title>
    <style>
        table{
    
    
            width: 256px;
            height: 256px;
            margin: 49px auto;
            text-align: center;
            border-collapse: collapse;
        }

        button{
    
    
            display: block;
            width: 100px;
            height: 100px;
            background-color: #ddd;
            border-radius: 2px;
            box-shadow: 0 0 4px red;
            margin: -18px auto;
        }

        .box1{
    
    
            background-color: #fff;
        }

        .box2{
    
    
            background-color: #096;
        }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td class="box1">卡卡西</td>
            <td class="box1">我爱罗</td>
            <td class="box1">鸣人</td>
        </tr>

        <tr>
            <td class="box1">佐助</td>
            <td class="box1">自来也</td>
            <td class="box1">大蛇丸</td>
        </tr>

        <tr>
            <td class="box1">纲手</td>
            <td class="box1">薛之谦</td>
            <td class="box1">华晨宇</td>
        </tr>

    </table>

    <button>开始抽奖</button>

    <script>
        var btn=document.getElementsByTagName("button")[0];
        var oltd=document.getElementsByTagName("td");
        var content=["卡卡西","我爱罗","鸣人","佐助","自来也","大蛇丸","纲手","薛之谦","华晨宇"];
        btn.onclick=function(){
    
    
            console.log(btn.innerHTML);
            if(btn.innerHTML=="开始抽奖"){
    
    
               time=setInterval(function(){
    
    
                for(i=0;i<9;i++){
    
    
                    document.getElementsByTagName("td")[i].className="box1";
                }
                    var tdname = document.getElementsByTagName("td")[parseInt(Math.random()*content.length)];
                    var value=content[parseInt(Math.random()*content.length)];
                    console.log(value);
                    if (tdname.className=="box1"){
    
    
                    tdname.className="box2";
                }else if(tdname.className=="box1") {
    
    
                    tdname.className="box2";
                }
               },50)
        btn.innerHTML="结束";
            }else if(btn.innerHTML=="结束"){
    
    
                clearInterval(time);
                btn.innerHTML="开始抽奖";
            }
        }


    </script>
</body>
</html>
火影忍者抽奖活动升级版_zhou125disorder_

猜你喜欢
