JavaScript 大乐透随机数

随机数"/>

JavaScript 大乐透随机数

用到的知识点包括 sort¹，Math.random²，Math.round³。
下面是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;
}