javascript_火影忍者抽奖活动升级版_ZHOU125disorder_

zjing125

于 2021-01-06 17:54:37 发布

阅读量127

点赞数

分类专栏： # JavaScript案例文章标签： js效果

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/112287571

版权

JavaScript案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

zjing125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_火影忍者抽奖活动升级版_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{
复制链接

扫一扫