用到的知识点包括 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;
}