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

  • 相关阅读:
    BI 商业智能理解结构图
    编写SqlHelper使用,在将ExecuteReader方法封装进而读取数据库中的数据时会产生Additional information: 阅读器关闭时尝试调用 Read 无效问题,解决方法与解释
    C#程序读取数据库中包含null的列的值
    C#程序中从数据库取数据时需注意数据类型之间的对应,int16int32int64
    在Eclipse中启动tomcat后访问tomcat首页时出现404
    JavaWeb:报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
    spring环境搭建
    Struts2环境搭建
    MySQL中case then用法
    在1-10中选择一个数,输出x+xx+xxx+xxx....x之和,如:数字为2,则2+22=24
  • 原文地址:https://www.cnblogs.com/yangqing22/p/14065754.html
Copyright © 2020-2023  润新知