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 相关文章推荐
基于jquery的拖动布局插件
Nov 25 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
使用vue构建多页面应用的示例
Oct 22 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 Smarty 字符比较代码
2011/02/27 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
万能的php分页类
2017/07/06 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python中str内置函数用法总结
2020/12/27 Python
优秀党员转正的自我评价
2013/10/06 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
个人存款证明书
2014/10/18 职场文书
运动会加油稿20字
2014/11/15 职场文书
个园导游词
2015/02/04 职场文书
安徽导游词
2015/02/12 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技