JavaScript 大乐透随机数

用到的知识点包括 sort1,Math.random2,Math.round3
下面是js实现代码

// 点击事件
function start() {
  var arr1 = newRandomNumbersWithNoRepeat(1, 35, 5);
  var arr2 = newRandomNumbersWithNoRepeat(1, 12, 2);
  arr1.sort(compare);
  arr2.sort(compare);
  document.getElementById("b1").value = arr1[0];
  document.getElementById("b2").value = arr1[1];
  document.getElementById("b3").value = arr1[2];
  document.getElementById("b4").value = arr1[3];
  document.getElementById("b5").value = arr1[4];
  document.getElementById("b6").value = arr2[0];
  document.getElementById("b7").value = arr2[1];
  // document.getElementById("button").style.display = 'none';
  document.getElementById("three").style.display = 'block';
}
function newRandomNumbersWithNoRepeat(start,end,size){
  var para=new Array(); // 目标随机数组
  var rnum; // 当前随机数
  var currentIndex=0; // 当前随机数组的索引
  if(start>end||start<0||end<0||size<0){
    return;
  }
  if(end-start+1<size){ // 验证随机数个数是否超出随机数范围
    return;
  }
  for(var i=0;i<size;i++){ // 生成 size 个不重复的随机数
    rnum=newNumber(start,end); // 获取随机数
    if(isHaveThisNumber(para,rnum)){ // 是否已经存在
      while(isHaveThisNumber(para,rnum)){ // 获取新的随机数 直到不重复
        rnum=newNumber(start,end); // 重新获取随机
      }
    }
    para[currentIndex++]=rnum; // 添加到现有数字集合中
  }
  return para;
}
function isHaveThisNumber(para,num){
  //拒绝无效的数组
  if(typeof(para) == "object")
  {
    if(para.length==0)
    {
      return false;
    }
  }
  for(var i=0;i<para.length;i++){
    if(para[i]==num){
      return true;//与目标数组有重复
    }
  }
  return false;
}
// 排序
function compare(val1,val2){
  return val1-val2;
};
// 随机数
function newNumber(start,end){
  return Math.round(Math.random()*(end-start)+start);//生成在[start,end]范围内的随机数值,只支持不小于0的合法范围
}
<div class="random-number">
  <div id="button">
    <button type="button" class="random-btn" onclick="start()">随机选号</button>
  </div>

  <div class="number" id="three">
    <input id="b1" type="button" class="b1" value=""></input>
    <input id="b2" type="button" class="b2" value=""></input>
    <input id="b3" type="button" class="b3" value=""></input>
    <input id="b4" type="button" class="b4" value=""></input>
    <input id="b5" type="button" class="b5" value=""></input>
    <input id="b6" type="button" class="b6" value=""></input>
    <input id="b7" type="button" class="b7" value=""></input>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
}
.random-number{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.random-btn{
  font-size: 56px;
  font-family: initial;
  color: crimson;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
}
.number{
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.b1{
  font-size: 70px;
  color: red;
}
.b2{
  font-size: 70px;
  color: red;
}
.b3{
  font-size: 70px;
  color: red;
}
.b4{
  font-size: 70px;
  color: red;
}
.b5{
  font-size: 70px;
  color: red;
}
.b6{
  font-size: 70px;
  color: blue;

}
.b7{
  font-size: 70px;
  color: blue;
}

  1. 对数组进行排序,通过参数生成升序还是降序排列,默认升序(从小到大) ↩︎

  2. 产生一个 0-1 之间的的随机数,是Java语言常用代码。例如:double a=Math.random()*(3-1)+1,设置一个随机1到3的变量 ↩︎

  3. 四舍五入到最接近的整数 ↩︎

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值