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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
用原生js做单页应用
Jan 17 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
js实现星星打分效果
Jul 05 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
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
php精度计算的问题解析
2019/06/21 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
Javascript 对象的解释
2008/11/24 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Python Matplotlib库入门指南
2015/05/18 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
大学军训感言
2014/01/10 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android