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

   }

   function Star(num){

    //跑马灯变速

    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>

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

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

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

  2. PHP实现大转盘抽奖算法实例

    本文主要向大家介绍了PHP语言实现大转盘抽奖算法,通过具体的实例向大家展示,希望对大家学习PHP抽奖有所帮助. 流程:1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' ...

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

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

  4. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  5. 纯CSS3大转盘抽奖（响应式、可配置）

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

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

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

  7. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  8. Java 实现大转盘抽奖

    需要用到 JAVA中的Random()函数 注意:大转盘抽奖各奖项中奖概率之和为 1.奖品列表中的概率为累加概率,需要按照添加进列表的顺序进行累加,添加顺序不做要求. 实际中使用需要考虑奖品数量限制等 ...

  9. PHP制作的掷色子点数抽奖游戏实例

    PHP制作的掷色子点数抽奖游戏实例,通过掷色子点数来达到抽奖的效果,为抽奖活动增添一些趣味性. 我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来 ...

随机推荐

  1. 谷歌PageRank算法

    1. 从Google网页排序到PageRank算法 (1)谷歌网页怎么排序? 先对搜索关键词进行分词,如“技术社区”分词为“技术”和“社区”: 根据建立的倒排索引返回同时包含分词后结果的网页: 将返回 ...

  2. gradle-4.1-rc-1-all.zip gradle-4.1-rc-2-all.zip 免费下载(百度网盘)

    今天下载遇到官网不给力,给有需要的你 gradle-4.1-rc-1-all.zip 密码: uyey gradle-4.1-rc-2-all.zip 密码: txhh

  3. Lynx以纯文本的形式下载网页

    Lynx是一款基于命令行的web浏览器 [root@test88 ~]# yum install lynx -y [root@test88 ~]# lynx www.baidu.com 以纯文本的形式 ...

  4. MySQL 作业题及答案

    MySQL 测试题 一. 表关系: 请创建如下表,并创建相关约束 创建表sql如下: /* Navicat MySQL Data Transfer Source Server : 192.168.11 ...

  5. python类的继承和多态

    现在属于是老年人的脑子,东西写着写着就忘了,东西记着记着就不知道了.之前学C++的时候就把类.对象这块弄得乱七八糟,现在是因为很想玩python,所以就看看python的类和对象. 就像说的,类有三个 ...

  6. CSRF攻击的应对之道

    CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下执 ...

  7. 简易web server之python实现

    网络编程一项基本功是socket编程,包括TCP socket,UDP socket的客户端.服务器端编程. 应用层的各路协议如http,smtp,telnet,ftp等都依赖于传输层的TCP或者UD ...

  8. 秀尔算法：破解RSA加密的“不灭神话” --zz

    http://netsecurity.51cto.com/art/201508/488766.htm RSA加密曾被视为最可靠的加密算法,直到秀尔算法出现,打破了RSA的不灭神话. RSA加密 VS ...

  9. PhpStorm设置函数注释模板

    *设置位置:"Settings"->"file templates"; 如下图,设置头部注释.类注释以及函数注释,时间.用户名.文件名称等随机改变的属性, ...

  10. nodejs pm2配置使用教程

    pm2是非常优秀工具,它提供对基于node.js的项目运行托管服务.它基于命令行界面,提供很多特性: 内置的负载均衡器等等,下面我们就一起来看看吧. 一.简介 pm2是一个带有负载均衡功能的应用进程管 ...