效果：点击到一定时间后随机停在一个数
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>
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
