原生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);
};