jq+css实现跑马灯效果的轮盘抽奖

代码实现的效果是奖项不变,有一块高亮围绕着边框进行跑马灯式的展示,并且设置开始后几秒后速度进行变快,在中奖前的前几秒的位置开始缓慢,并暂停在后台返回要抽中的奖项上面;

<table id="tb" class="drawContent">
    <tr>
        <td>
            <p>100元话费</p>
            <label>(剩余 50 份)</label>
        </td>
        <td>
            <p>200元话费</p>
            <label>(剩余 50 份)</label>
        </td>
        <td>
            <p>100元话费</p>
            <label>(剩余 50 份)</label>
        </td>
    </tr>
    <tr>
        <td>
            <p>10元话费</p>
            <label>(剩余 50 份)</label>
        </td>
        <td>
            <button onclick="StartGame()">
            <img src="images/beginDraw.png" />
            </button>
        </td>
        <td>
            <p>50元话费</p>
            <label>(剩余 50 份)</label>
        </td>
    </tr>
    <tr>
        <td>
            <p>10元话费</p>
            <label>(剩余 50 份)</label>
            </td>
        <td>
            <p>50元话费</p>
            <label>(剩余 50 份)</label>
        </td>
        <td>
            <p>100元话费</p>
            <label>(剩余 50 份)</label>
        </td>
    </tr>
</table>  

 js如下:

function GetSide(m, n) {
                    //初始化数组
                    var arr = [];
                    for(var i = 0; i < m; i++) {
                        arr.push([]);
                        for(var j = 0; j < n; j++) {
                            arr[i][j] = i * n + j;
                        }
                    }
                    //获取数组最外圈
                    var resultArr = [];
                    var tempX = 0,
                        tempY = 0,
                        direction = "Along",
                        count = 0;
                    while(tempX >= 0 && tempX < n && tempY >= 0 && tempY < m && count < m * n) {
                        count++;
                        resultArr.push([tempY, tempX]);
                        if(direction == "Along") {
                            if(tempX == n - 1)
                                tempY++;
                            else
                                tempX++;
                            if(tempX == n - 1 && tempY == m - 1)
                                direction = "Inverse"
                        } else {
                            if(tempX == 0)
                                tempY--;
                            else
                                tempX--;
                            if(tempX == 0 && tempY == 0)
                                break;
                        }
                    }
                    return resultArr;
                }
  
                var index = 0, //当前亮区位置
                    prevIndex = 0, //前一位置
                    Speed = 300, //初始速度
                    Time, //定义对象
                    arr = GetSide(3, 3), //初始化数组
                    EndIndex = 0, //决定在哪一格变慢
                    tb = document.getElementById("tb"), //获取tb对象
                    cycle = 0, //转动圈数 
                    EndCycle = 0, //计算圈数
                    flag = false, //结束转动标志
                    quick = 0; //加速
                var endChecked = 0;
  
                function StartGame() {
                    cycle = 0;
                    flag = false;
//                  EndIndex =  ;//1-9
                    EndCycle = 1;
                    Time = setInterval(Star, Speed);
                }
  
                function Star(num) {
                    //跑马灯变速
                    if(flag == false) {
                        //走4格开始加速
                        if(quick == 4) {
                            clearInterval(Time);
                            Speed = 100;
                            Time = setInterval(Star, Speed);
                        }
//                      ajax 确定中奖项
                    endChecked = 1//0-7
                    EndIndex = Math.floor(Math.random()*8);
                      
                        //跑N圈减速
                        console.log(cycle+'---'+EndCycle)
                        //最少跑两圈 不能停的太快 等不到后台返回值
                        if(cycle>2&& index == endChecked+1) {
                            clearInterval(Time);
                            Speed = 300;
                            flag = true; //触发结束
                            Time = setInterval(Star, Speed);
                        }
                    }
                    if(index >= arr.length) {
                        index = 0;
                        cycle++;
                    }
                      
                    //结束转动并选中号码
                    if(flag == true && index == endChecked) {
                        quick = 0;
                        clearInterval(Time);
                    }
  
                    tb.rows[arr[index][0]].cells[arr[index][1]].className = "act";
                    if(index > 0)
                        prevIndex = index - 1;
                    else {
                        prevIndex = arr.length - 1;
                    }
                    tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className ="";
                    index++;
                    quick++;
  
                }

 这里不需要再引入别的js库,jq都不需要;

原文地址:https://www.cnblogs.com/yangqing22/p/14065754.html