js实现随机抽选效果、随机抽选红色球效果


Posted in Javascript onJanuary 13, 2017

js实现随机抽选效果、随机抽选红色球效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>caipiao</title>
</head>
<body>
  <div id="wrap"></div>
  <button id="goBtn">go</button>
  <button id="stopBtn">stop</button>
  <script type="text/javascript">
  var wrap = document.getElementById("wrap");
  var goBtn = document.getElementById("goBtn");
  var stopBtn = document.getElementById("stopBtn");
  function rnd(min, max) {
    return parseInt(Math.random()*(max - min + 1) + min);
  }
  function rndArray(min, max, length) {
    //先定义一个空数组
    var arr = [];
    //生成一个长度为7的数组
    while(arr.length < length) {
      //生成一个随机数
      var rand = rnd(min, max);
      //判断生成的随机数rand是否在数组arr里,果然不在,就将这个随机数插入到数组里,如果在,执行下一次循环
      if(arr.indexOf(rand) == -1) {
        arr.push(rand);
      }
    }
    arr.sort(function(a, b){return a - b;})
    return arr;
  }
    //rndArray(最小范围值,最大范围值,个数)
  wrap.innerHTML = rndArray(1,33,7);
  var timer = 0;
  goBtn.onclick = function() {
    clearInterval(timer);
    timer = setInterval(function() {
      wrap.innerHTML = rndArray(1,33,7);
    },100)
    console.log(timer);
  }
  stopBtn.onclick = function() {
    clearInterval(timer);
  }
  </script>
</body>
</html>

随机抽选

js实现随机抽选效果、随机抽选红色球效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>caipiao</title>
  <style type="text/css">
    * {
      margin:0;
      padding: 0;
    }
    #wrap {
      width:621px;
      margin:0 auto;
      padding:50px 0;
      background-color:rgb(255, 242, 242);
    }
    #inner {
      width:490px;
      margin:0 auto;
      overflow: hidden;
    }
    #inner span {
      float: left;
      width:30px;
      height: 30px; 
      border-radius: 15px;
      border:1px solid #d9d9d9;
      line-height: 30px;
      text-align: center;
      color:#333;
      background-color: #f8f8f8;
      margin:18px 6px;
    }
    #inner span.active {
      background-color: red;
      color:#fff;
    }
    #wrap p {
      text-align: center;
    }
    button {
      border:none;
      outline: none;
      width:120px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      border-radius: 4px;
    }
    #selectBtn {
      background-color: red;
      color:#fff;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="inner">
      <span>01</span>
      <span>02</span>
      <span>03</span>
      <span>04</span>
      <span>05</span>
      <span>06</span>
      <span>07</span>
      <span>08</span>
      <span>09</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span>16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
      <span>21</span>
      <span>22</span>
      <span>23</span>
      <span>24</span>
      <span>25</span>
      <span>26</span>
      <span>27</span>
      <span>28</span>
      <span>29</span>
      <span>30</span>
      <span>31</span>
      <span>32</span>
      <span>33</span>
    </div>
    <p>
      <button id="selectBtn">机选红球</button>
      <button id="clearBtn">清空</button>
    </p>
  </div>
  <script type="text/javascript">
  var wrap = document.getElementById("wrap");
  var selectBtn = document.getElementById("selectBtn");
  var clearBtn = document.getElementById("clearBtn");
  var ballList = document.getElementById("wrap").getElementsByTagName("span");
  function rnd(min, max) {
    return parseInt(Math.random()*(max - min + 1) + min);
  }
  function rndArray(min, max, length) {
    //先定义一个空数组
    var arr = [];
    //生成一个长度为7的数组
    while(arr.length < length) {
      //生成一个随机数
      var rand = rnd(min, max);
      //判断生成的随机数rand是否在数组arr里,果然不在,就将这个随机数插入到数组里,如果在,执行下一次循环
      if(arr.indexOf(rand) == -1) {
        arr.push(rand);
      }
    }
    arr.sort(function(a, b){return a - b;})
    return arr;
  }
  selectBtn.onclick = function() {
    for(var j = 0; j < ballList.length; j++) {
      ballList[j].className = "";  
    }
    var arr = rndArray(1,33,7);
    console.log(arr);
    for(var i = 0; i < arr.length; i++) {
      ballList[arr[i]-1].className = "active";
    }
  }
  clearBtn.onclick = function() {
    for(var j = 0; j < ballList.length; j++) {
      ballList[j].className = "";  
    }
  }
  </script>
</body>
</html>

要实现点击得到自动随机数还得在clearBtn.onclick前面添加个定时器

var timer = 0;
  selectBtn.onclick = function() {
    clearTimeout(timer);
    timer = setInterval(selectBall,100);
    setTimeout(function() {
      clearTimeout(timer);
    },3000)
    // clearTimeout(timer);
  }

这样就实现了动态图的功能了(*^__^*) 嘻嘻!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
bootstrap下拉菜单使用方法解析
Jan 13 #Javascript
js数组与字符串常用方法总结
Jan 13 #Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 #Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 #Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 #Javascript
You might like
CodeIgniter钩子用法实例详解
2016/01/20 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
浅析Python3 pip换源问题
2020/01/06 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
优秀团员个人的自我评价
2013/10/02 职场文书
工厂厂长的职责
2013/12/12 职场文书
面试后的感谢信范文
2014/02/01 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
校园活动宣传方案
2014/03/28 职场文书
主持人演讲稿
2014/05/13 职场文书
工地安全质量标语
2014/06/07 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
2016年母亲节广告语
2016/01/28 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS