某天脑子里突然闪过要做一个九宫格抽奖的小项目，然后就试着写了一下，本来是想通过控制盒模型的样式位置来实现轮转的效果，但是试了好几种方法似乎都不能让盒模型按顺时针方向停一下走一下。关键的代码如下，在把盒模型（一个边框）套在九宫格上的时候发现会导致按钮失效，于是百度了一下，发现只要设置点击按钮前将div改成不显示，点击后再块状化就可以解决。但是定时器这个怎么设置真的是难倒我了，希望有一天能灵光一闪想出解决的方法8。
position: absolute;
top:85px;
left:85px;
/*要求盒子相对与父元素移动，向左右上下每变动一次加减85*/
border: 5px solid #dd0000;
width:80px;
height: 80px;
}
}
</style>
<script type="text/javascript">
window.onload=function(){
var dir=0;
var cj=document.getElementById("cj");
var box1=document.getElementById("box1");
var li=document.getElementsByTagName("li");
var one=document.getElementById("one");
box1.style.display = "none";
var timer;
var num=85;
cj.onclick=function(){
box1.style.display = "block";
var intervalId, timeoutId;
timeoutId = setTimeout(function () {
box1.style.top=box1.offsetTop+num+"px";
}, 3000);
setTimeout(function () {
//clearTimeout(timeoutId);
box1.style.left=box1.offsetLeft+num+"px";
}, 3000);
试了两个晚上决定参考一下网络上的实现方法转换一下自己的思路，大概看了一下别人的构思，参照着做了一下，也修复了参考代码上的一些问题，增加了一些输出语句，大概是这样婶的：改代码的过程中发生了一件非常乌龙的事，老数组毛病了，这里需要注意的是取余后的值是代表第n的数，并不是我们想输出值的下标。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 600px;
height: 600px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
margin: 100px auto;
}
.block {
width: 33.33%;
height: 33.33%;
outline: 1px solid black;
text-align: center;
line-height: 200px;
font-size: 26px;
}
.block5 {
background-color:skyblue;
/*设置鼠标样式*/
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
var blocks = document.getElementsByClassName("block");
// 数组存放的是盒子的下标，按照顺时针的顺序
var arr = [0, 1, 2, 5, 8, 7, 6, 3], i = 0, count = 0, stopTimer;
var rand = Math.floor(Math.random() * 8 + 40);
var res=rand%8; // 给出一个停止计时器的随机数 count的值等于这个随机数时停止计时器
var around = function () {
var jp=0;
// 将其他盒子都变为白色
for (var j = 0; j < arr.length; j++) {
blocks[arr[j]].style.backgroundColor= "white";
}
// 这里blocks的取值为 blocks[0] blocks[1] blocks[2] blocks[5] blocks[8] blocks[7] blocks[6] blocks[3]
// 将当前arr[i]值所对应的盒子修改为粉色
blocks[arr[i]].style.backgroundColor= "pink";
i++;
// 重制i的值
if (i === arr.length) {
i = 0;
}
count++; // count是一个计数器 根据count的值来调整速度
// 下面的4个if根据count的值来关闭计时器和重启计时器 改变计时器的时间间隔
if (count === 5 || count === 45) {
clearInterval(stopTimer);
stopTimer = setInterval(around, 200);
}
if (count === 10 || count === 35) {
clearInterval(stopTimer);
stopTimer = setInterval(around, 100);
}
if (count === 15) {
clearInterval(stopTimer);
stopTimer = setInterval(around, 50);
}
// 当等于上面的随机数时，停止计时器
if (count === rand) {
clearInterval(stopTimer);
setTimeout(function (){
//alert(res);
//要能够判断究竟有没有抽中奖品
var reward=blocks[arr[res-1]].innerHTML;
if(reward==="谢谢参与"){
alert("您未抽中奖品");
}else{
alert("您抽中的奖品是"+reward);
}
},1000);
}
}
// 给开始按钮绑定点击事件 点击后执行 around
var start = function () {
blocks[4].removeEventListener("click", start); // 当用户点击了开始按钮后 必须要移除该事件 防止用户重复点击
stopTimer = setInterval(around, 300);
}
blocks[4].addEventListener("click", start);
}
</script>
</head>
<body>
<div id="container">
<div class="block">小米笔记本</div>
<div class="block">iPhoneX</div>
<div class="block">PS4游戏机</div>
<div class="block">谢谢参与</div>
<div class="block block5">开始抽奖</div>
<div class="block">索尼电视机</div>
<div class="block">西门子冰箱</div>
<div class="block">老板抽油烟机</div>
<div class="block">空气净化机</div>
</div>
</body>
</html>
最后我要说一个我觉得很特别的事情，目前我也搞不清楚是怎么引起的，
按照正确的输出结果来说我们抽中的是iphone,但是为什么会出现在计时器停止之前就输出了结果，而且这个结果恰好是我们抽中的奖品的前一个，当我们点击确定后，这个九宫格才会跳到正确的位置，like this：
我百思不得其解，后面试着用了setTimeout函数，将输出结果的函数推迟到一秒后再执行，这个问题就解决了，也是蛮神奇的。
but还有最后一个问题是当转到谢谢参与的时候啥都没输出，准备明天仔细研究一番再来更新文章。
