随机点名

随机点名

阳光明媚的上海今天更个博吧😁！
一、html布局：

<table>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
        <tr>
            <td>王西北</td>
            <td>贝贝</td>
            <td>北北</td>
            <td>北鼻</td>
            <td>宝贝</td>
            <td>北鼻</td>
            <td>宝贝</td>
        </tr>
    </table>

二、css样式：

<style>
        table{
            display: block;
            margin:50px auto 0;
            background:#333;
            width:800px;
            color:gold;
        }
        td{
            width:200px;
            text-align: center;
            line-height: 26px;
            border:1px solid pink;
            background:#333;
            height:50px;
        }
        input{
            width:100px;
            height:50px;
            background:gold;
            color:#fff;
            display: block;
            margin:20px auto;
            font-size:20px;
            cursor:pointer;
            border:0;
            text-align:center;
        }
        .current{
            background:rgb(102, 18, 81);
            color:#fff;
        }
       
    </style>

三、js：

<script>
        //1、先获取节点
        var obtn=document.getElementById("btn");
        var tds=document.getElementsByTagName("td");
        //2、声明一个变量来判断他的功能，当open为0时表示开启计时器；当open为1时表示关闭计时器
        var open=0;
        var t;
        obtn.onclick=function(){//点击开始时
            if(open==0){//判断当open等于0时开启计时器
            //    obtn.value="停止";
                clearInterval(t);//开启计时器之前先清除计时器；
                t=setInterval(function(){
                    var num=Math.round(Math.random()*(tds.length));
                    //将名字用随机数进行随机，生成的这个数是td的length；
                    for(var i=0;i<tds.length;i++){
                        //找到每个名字，然后进行循环，设置循环的每个i的className为空
                        tds[i].className="";
                    };
                    // console.log(num);
                    tds[num].className="current";
                    //然后在随机的名字添加ClassName，在css里设置他的样式，背景颜色和字体颜色；
                },30);
                open=1;//关闭计时器
                obtn.value="继续"//btn的值为继续
                obtn.style.background="rgb(103, 113, 207)";
            }else{
                clearInterval(t);
                open=0;//开启计时器
                obtn.value="就是你";
                obtn.style.background="rgb(102, 18, 81)";
            }
        }
        
    </script>

随机点名就完成啦！~~~ 多点两次真的会上瘾😜