原生JS代码写九宫格随机抽奖

实现步骤

1.HTML代码

一等奖

二等奖

三等奖

四等奖

开始抽奖

五等奖

六等奖

七等奖

八等奖

初始状态

最终状态

2.CSS样式代码

table#parent{
width:500px;height:500px;
border-collapse:collapse;
table-layout:fixed;
border:2px solid #FF523A;
margin:0 auto;
}
table#parent td{
border:2px solid #FF523A;
text-align: center;
}
table#parent td.start{
background: #29A6FF;
color:aliceblue;
font-weight: bold;
}
.end{
background:rgba(255, 0, 0,0.8);
color:aliceblue;
font-weight: bold;
}

3.Javascript代码

//JS DOM功能四部曲(牢记)

//1.查找事件发生元素
//2.绑定事件处理函数
//3.查找要修改的元素(位置:事件处理函数内部)
//4.修改改元素(位置:事件处理函数内部)

//1.查找class="start"的元素
var td=document.getElementsByClassName("start")[0];

//2.绑定td的单击(onclick)事件处理函数
td.onclick=function(){
//3.查找要修改的元素即除td.start外所有其他td元素
//需要利用:not(selector)选择器查找
var tds=document.querySelectorAll("table td:not(.start)");
var d=tds.length;var i=0;//i为转动方格总数，初时值为0

//默认初时状态至少循环转动3次，每次转动方格数为tds.length
var sum=parseInt(Math.random()\*d)+d\*3;

//4.开始修改其他td元素  
var timer=setInterval(function(){
    //第1步：在最开始确保所有其他td元素没有背景颜色
   //for循环遍历tds中的每一个td
 for(var k=0;k 一等奖   tds\[1\] -> 二等奖  tds\[2\] -> 三等奖 
    tds\[3\] -> 四等奖                     tds\[4\] -> 五等奖 
    tds\[5\] -> 六等奖   tds\[6\] -> 七等奖  tds\[7\] -> 八等奖 */

//方向--\> 顺时针奖项为:一，二，三，五，八，七，六，四;
//规律1--> 在数组tds中对应下标:0,1,2,4,7,6,5,3
//规律2--> 当奖盘转动8个方格时，停留在td\[0\]即一等奖;
//         当奖盘转动9个方格时，停留在td\[1\]即二等奖;
//         当奖盘转动10个方格时，停留在td\[2\]即三等奖;
//总结:最后总共转动的方格数sum对tds.length取模，模数等于td的下标
//规律3:如果要循环旋转起来，则需要用到周期性时间定时器setInterval

    //根据当前转动次数取模，确定停留的奖项位置
    if(i%d==0){
        var j=0;//j为tds的下标0-->一等奖
    }
    if(i%d==1){
        var j=1;//j为tds的下标1-->二一等奖
    }
    if(i%d==2){
        var j=2;//j为tds的下标2-->三等奖
    }
    if(i%d==3){
        var j=4;//j为tds的下标4-->五等奖
    }
    if(i%d==4){
        var j=7;//j为tds的下标8-->八等奖
    }
    if(i%d==5){
        var j=6;//j为tds的下标6-->七等奖
    }
    if(i%d==6){
        var j=5;//j为tds的下标5-->六等奖
    }
    if(i%d==7){
        var j=3;//j为tds的下标3-->四等奖
    }

    //当最后主动i次后停留的下表为j
    tds\[j\].className="end";

    //计算转动的总次数
    i++;

    //设置清除定时器的条件,即转动到当前i==sum时
    if(i==sum){
        clearInterval(timer);
        //alert具有延时功效故需要设置一次性定时器，清除延时
        setTimeout(function(){
            alert(`恭喜你中了${tds\[j\].innerHTML}`);
        },1000);
    }
}
,300);

};