• 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都不需要;

  • 相关阅读:
    ASP.NET MVC中权限控制的简单实现
    HDU1004——Let the Balloon Rise
    如何使用飞秋FeiQ实现两电脑通信(或传输文件)
    vb.net 鼠标控制
    ireport制作报表pageheader只在第一页出现的解决办法
    Keycode对照表
    leetcode第一刷_Binary Tree Zigzag Level Order Traversal
    换硬币问题
    STM32 寄存器库和固件库
    java网络编程(2)InetAddress 类及udp协议
  • 原文地址:https://www.cnblogs.com/yangqing22/p/14065754.html
Copyright © 2020-2023  润新知