js轮盘抽奖

最新推荐文章于 2025-12-15 13:00:22 发布

转载最新推荐文章于 2025-12-15 13:00:22 发布 · 1.4k 阅读

文章标签：

#function #xhtml #button #input #html

javascript 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js抽奖</title>
    <style type="text/css">
        td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle}
    </style>
</head>
<body>
<table id="tb">
<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
    <td>16</td><td></td><td></td><td></td><td>6</td>
</tr>
<tr>
    <td>15</td><td></td><td></td><td></td><td>7</td>
</tr>
<tr>
    <td>14</td><td></td><td></td><td></td><td>8</td>
</tr>
<tr>
    <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td>
</tr>
</table>
<p></p>
请输入1-16其中一位整数，代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="开始" onclick="StartGame()" />
    <script type="text/javascript">

        /*
        * 删除左右两端的空格
        */
        function Trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }

        /*
        * 定义数组
        */
        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(5, 5),         //初始化数组
         EndIndex = 0,           //决定在哪一格变慢
         tb = document.getElementById("tb"),     //获取tb对象
         cycle = 0,           //转动圈数
         EndCycle = 0,           //计算圈数
        flag = false,           //结束转动标志
        quick = 0;           //加速

        function StartGame() {
            cycle = 0;
            flag = false;
            EndIndex = Math.floor(Math.random() * 16);
            //EndCycle=Math.floor(Math.random()*4);
            EndCycle = 1;
            Time = setInterval(Star, Speed);
        }

            if (index >= arr.length) {
                index = 0;
                cycle++;
            }

            //结束转动并选中号码
            if (flag == true && index == parseInt(Trim(document.getElementById("txtnum").value)) - 1) {
                quick = 0;
                clearInterval(Time);
            }

            tb.rows[arr[index][0]].cells[arr[index][1]].style.border = "3px solid red";
            if (index > 0)
                prevIndex = index - 1;
            else {
                prevIndex = arr.length - 1;
            }
            tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border = "3px solid #ccc";
            index++;
            quick++;

        }
        /*
        window.onload=function(){
        Time = setInterval(Star,Speed);
        }
        */
    </script>
</body>
</html>