JavaScript 实现彩票中随机数组的获取_html/css_WEB-ITnose

1.效果图:

  

    Math.random方法彩票随机数的生成               //获取节点       var btnGo = document.getElementById("btnGo");       var btnStop = document.getElementById("btnStop");       var text = document.getElementById("text");       //定义生成最小到最大值的随机函数       function rand(min,max){            return parseInt(Math.random()*( max - min + 1) + min);       }              function start(min,max,length){            //定义空数组          var arr = [];          while(arr.length<length){                 //生成一个随机数prem               var prem=rand(min,max);               //判断生成的随机数prem是否在数组arr里,果然不在,就将这个随机数插入到数组里,如果在,执行下一次循环               if(arr.indexOf(prem) == -1){                    arr.push(prem);               }          }          //返回数组arr          return arr;       }       var timer = 0;       //单击开始按钮生成随机数组       btnGo.onclick =function(){            //清除            clearInterval(timer);            timer = setInterval(function() {             text.value = start(1,33,7);        },50)       }       //单击停止按钮获取一组随机数       btnStop.onclick =function(){                clearInterval(timer);       }          

登录后复制

2.复杂版

 

立即学习“Java免费学习笔记(深入)”;

    Math.random方法彩票随机数的生成-升级版      *{          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;      }    
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

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 = ""; } }

登录后复制

 

立即学习“Java免费学习笔记(深入)”;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3109654.html

(0)
上一篇 2025年3月29日 10:27:16
下一篇 2025年3月29日 10:27:27

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论