大转盘

效果：点击到一定时间后随机停在一个数

head部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 0px solid;
            list-style: none;
        }
        th{
            width: 50px;
            height: 50px;
            border: 0px solid;
            background-color: #0A7EC3;
        }
        button{
            width: 104px;
            height: 104px;
            list-style: none;
            border: 0;
            background-color: red;
        }
        .th{
            background-color: red;
        }
    </style>
</head>

body部分：
<body>
<table>
    <tr>
        <th class="th">1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <th>12</th>
        <th colspan="2" rowspan="2"> <button>转起来</button></th>
        <th>5</th>

    </tr>
    <tr>
        <th>11</th>
        <th>6</th>
    </tr>
    <tr>
        <th>10</th>
        <th>9</th>
        <th>8</th>
        <th>7</th>
    </tr>
</table>

js部分：
<script>
    var th=document.getElementsByTagName("th");
    var bt=document.getElementsByTagName("button")[0];
    var arr=[];
    var m=0
    var tm=24+parseInt(25*Math.random())
    // 从0~25秒间取一个数，前面的24保证了必须转两圈
    for (n=0;n<th.length;n++){
        for(j=0;j<th.length;j++){
            if(n+1==th[j].innerHTML){
                arr[n]=j
            }
            // 每个n+1与新索引号j的数值相比较，如果相等就排进新数组里面
        }
    }
    document.write()
    bt.onclick=function() {
        for(i=0;i<tm;i++){
         setTimeout( function () {
              for(j=0;j<th.length;j++){
                  th[j].className=""
              }
              th[arr[m%12]].className = "th";
              m++
          },200*i)
            // 相当于轮播图的点击事件，点击转起来，就跳一格，背景就清空还原一次，
            // 但这里赋予了一个定时器，让它自动转，然后赋予一个随机数，当到达随机数时，
            // 就会清空定时器。

           }

    }

</script>
</body>
</html>

猜你喜欢