基于javascript实现彩票随机数生成(升级版)


Posted in Javascript onApril 17, 2020

本文实例讲解了JavaScript实现彩票中随机数组的获取详细代码,分享给大家供大家参考,具体内容如下

效果图:

基于javascript实现彩票随机数生成(升级版)

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Math.random方法彩票随机数的生成-升级版</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  .wrap{
   width: 600px;
   height: 300px;
   background-color: #f8e2e2;
   margin: 0 auto;
  }
  .list{
   width: 440px;
   /*border: 1px solid red;*/
   margin: 0px auto;
  }
  .list li{
   list-style: none;
   width: 30px;
   height: 30px;
   display: inline-block;
   border: 1px solid #fff;
   border-radius: 30px;
   line-height: 30px;
   text-align: center;
   margin: 15px auto 15px;
   /*background-color: #f8f8f8;*/
   /*background-color: rgba(255,255,255,1);*/
  }
  .wrap p{
   text-align: center;
  }
  .wrap p button{
   text-align: center;
   width: 100px;
  }
  #setBtn{
   background-color: red;
   color: #fff;
   border: none;
  }
  .active{
   background-color: red;
   color: #fff;
  }
 </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <ul class="list">
     <li>01</li>
     <li>02</li>
     <li>03</li>
     <li>04</li>
     <li>05</li>
     <li>06</li>
     <li>07</li>
     <li>08</li>
     <li>09</li>
     <li>10</li>
     <li>11</li>
     <li>12</li>
     <li>13</li>
     <li>14</li>
     <li>15</li>
     <li>16</li>
     <li>17</li>
     <li>18</li>
     <li>19</li>
     <li>20</li>
     <li>21</li>
     <li>22</li>
     <li>23</li>
     <li>24</li>
     <li>25</li>
     <li>26</li>
     <li>27</li>
     <li>28</li>
     <li>29</li>
     <li>30</li>
     <li>31</li>
     <li>32</li>
     <li>33</li>
    </ul>
    <p>
     <button id="setBtn">随机红球</button>
    <button id="clearBtn">清空</button>
    </p>
  </div>
  <script type="text/javascript">
    var ballList = document.getElementById("wrap").getElementsByTagName("li");
    var setBtn =document.getElementById("setBtn");
    var clearBtn =document.getElementById("clearBtn");
    //定义随机数组
    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;
 }

 function selectBall() {
  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";
  }
 }
 var timer = 0;
 setBtn.onclick = function() {
  clearTimeout(timer);
  timer = setInterval(selectBall,100);
  setTimeout(function() { 
   clearTimeout(timer);
  },3000)
  // clearTimeout(timer);
 }

 clearBtn.onclick = function() {
  clearTimeout(timer);
  for(var j = 0; j < ballList.length; j++) {
   ballList[j].className = ""; 
  }
 }
  </script>
</body>
</html>

以上就是本文的详细内容,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 #Javascript
理解Angular数据双向绑定
Jan 10 #Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 #Javascript
JavaScript电子时钟倒计时第二款
Jan 10 #Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
Node.js静态文件服务器改进版
Jan 10 #Javascript
实例讲解javascript注册事件处理函数
Jan 09 #Javascript
You might like
php 静态页面中显示动态内容
2009/08/14 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
js实现继承的5种方式
2015/12/01 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Django返回HTML文件的实现方法
2020/09/17 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
治庸问责心得体会
2014/09/12 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
python 远程执行命令的详细代码
2022/02/15 Python
Python os和os.path模块详情
2022/04/02 Python