效果:点击到一定时间后随机停在一个数
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>