<!DOCTYPE html>

<html>

<head>

    <title>js抽奖</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">

    <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);

    }

    function Star() {

        //跑马灯变速

        if (flag == false) {

            //走五格开始加速

            if (quick == 5) {

                clearInterval(Time);

                Speed = 50;

                Time = setInterval(Star, Speed);

            }

            //跑N圈减速

            if (cycle == EndCycle + 1 && index == EndIndex) {

                clearInterval(Time);

                Speed = 300;

                flag = true;   //触发结束

                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>

幸运大转盘游戏

https://files.cnblogs.com/files/theWayToAce/zpyx.rar

js实现游戏转盘抽奖的更多相关文章

  1. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  2. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  3. 简单JS旋转实现转盘抽奖效果

    闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...

  4. js实现大转盘抽奖游戏实例

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

  5. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  6. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  7. iOS 转盘抽奖游戏(原生)

    转盘抽奖游戏在一般的app中都会有,应该算是一种吸引用户的一种手段.在项目中集成转盘抽奖游戏,大都采用h5的方式来实现,但是由于项目需求,需要在app中使用原生来实现转盘抽奖.实现原理也很简单,中间的 ...

  8. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  9. js实现转盘抽奖

    大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...

随机推荐

  1. LeetCode 102 ——二叉树的层次遍历

    1. 题目 2. 解答 定义一个存放树中数据的向量 data,一个存放树的每一层数据的向量 level_data 和一个存放每一层节点的队列 node_queue. 如果根节点非空,根节点进队,然后循 ...

  2. 使用 Gradle 配置java项目

    注意点 除非调试,不要print ,否则任务不会按照依赖的顺序执行,因为我们自己喜欢调试用print,但是会打乱执行顺序. 排除测试文件: sourceSets.main.java { srcDir ...

  3. facebook演讲

    任何为了更大愿景工作的人,可能会被称为疯子,即使你最终获得成功. 任何为了复杂问题工作的人,都会因为不能全面了解挑战而被指责,即使你不可能事先了解一切. 任何抓住主动权先行一步的人,都会因为步子太快而 ...

  4. JavaScript中的事件代理/委托

    事件委托在JS高级程序设计中的定义为"利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件" 如何理解上面的这句话呢,在网上,大牛们一般都使用收快递这个例子来解释的, ...

  5. 《C++面试知识点》

    [动态内存] 1. 由内置指针管理的动态内存(即new和delete管理动态内存),直到被显式释放之前它都是存在的.假设该指针变量被销毁,那该内存将不会自动释放(即所谓的“内存泄漏”). 2. 可以用 ...

  6. alpha阶段个人总结（201521123031林庭亦）

    一.个人总结 第一部分:硬的问题 第二部分:软的问题,在成长路上学到了什么? 1 当你看到不靠谱的设计.糟糕的代码.过时的文档和测试用例的时候,不要想 "既然别人的代码已经这样了,我的代码也 ...

  7. 微信小程序wx.pageScrollTo的替代方案

    wx.pageScrollTo这个微信小程序的api功能如下: 简而言之就是实现页面滚动的.但是在实际应用当中显得有些鸡肋,为啥呢?使用中有明显页面有明显的抖动,这无疑是极不好的用户体验.我用的华为6 ...

  8. Perfmon - Windows 自带系统监控工具

    一. 简述 可以用于监视CPU使用率.内存使用率.硬盘读写速度.网络速度等. Perfmon提供了图表化的系统性能实时监视器.性能日志和警报管理,系统的性能日志可定义为二进制文件.文本文件.SQLSE ...

  9. linux核心版本号的说明

    日志不会很长,因为每天都在学习,我认为的重点,我自己做的记录,我很高兴能分享给大家: Linux的核心版本编号有点类似如下癿样子: 2.6.18-92.el5 主版本.次版本.释出版本-修改版本 因为 ...

  10. MapperScannerConfigurer的原理

    原文地址:http://www.mybatis.org/spring/zh/mappers.html#MapperScannerConfigurer 为了代替手工使用 SqlSessionDaoSup ...