js实现抽奖功能

原生js实现轮转抽奖功能

模拟做天涯明月刀已经告一段落，总结了一些以后也可以拿来使用的小功能--------这次是抽奖功能

这是一个抽奖的页面，要实现点击抽奖后每一块奖品出出现高亮。然后一直轮转，速度慢慢减缓，直到停下来。

首先这个高亮使用一张改变透明度灰色图片覆盖到每个奖品上实现的

就是上图这个效果
实现代码就是，在html中加上一个div

 <div id="swfcontent_hover" class="swfcontent_hover"></div>

再在css中添加样式，使其亮亮的

.swfcontent_hover{
   position: absolute;
   left: 0px;
   top: 0px;
   width: 304px;
   height: 204px;
   display:none;
   background: url("images/sel.png") no-repeat;
   opacity: .6;
}

整个事件的逻辑就是，

1.点击抽奖swfcontent_hover的display需要=“block”，
2.然后根据抽奖界面的宽高进行限定，控制swfcontent_hover的 left 和 top 使其顺时针移动，先是向左移动，每次移动340px(奖品格子的宽度)，移动到其left=680的时候就停止，向下移动。
3.向下每次移动250（奖品格子的高度），当移动到top=500px时，再向右运动。。。
以此类推，进行顺时针旋转。

//抽奖模块
var lottery = document.getElementById("swfcontent_start");     ----获取到中间点击抽奖按钮的div
//设置两个变量，用于下面移动的判断
var number = 0;     ----代表left的变量 
var number1 = 0;    ----代表top的变量
lottery.onclick = function () {
    autoplay3();
}
//对于白框left和top的改变
function directionshift() {
    var leap = document.getElementById("swfcontent_hover");
    leap.style.display = "block";
    leap.style.left = number + "px";
    leap.style.top = number1 + "px";

}
//向右和下移动的定时器
var timer1 = null;
var time = 50;
function autoplay3() {
    timer1 = setInterval(function () {
        directionshift();
        //移动的判断
        if (number < 680 && number1 == 0) {               //向左    
            number += 340;
        } else if (number1 < 500 && number != 0) {        //向下
            number1 += 250;
        } else if (number <= 680 && number > 0) {         //向右
            number -= 340;
        } else if (number == 0 && number1 > 0) {          //向上
            number1 -= 250; 
        }
        if (number == 0 && number1 == 0) {        //当回到原点时，让下一圈的速度减慢
            clearInterval(timer1);                //清楚原来的time
            time += 100;                          //每次time延长100
            autoplay3();
            if (time == 450) {                    //直到速度很慢time等于450时，使高亮图片停止移动
                clearInterval(timer1);            //清除定时器
                lottery.onclick = function () {    //如果再次点击，进行判断
                    alert("今天的抽奖次数用完喽");
                    return false;
                }
                alert("恭喜你获得一级寒石*3，请注意查收！");        //当time的时候落到的奖品块

            }
        }
    }, time);
}

其中关于定时器有一个小的知识点，定时器如果想改变每次的time值，必须先清除原来的定时器，然后再改变time时间。例如代码中不能直接让time+=100。

对于这个抽奖功能，就这些内容就可以实现，如果有什么问题，请指正。