Realization effect: 3 text boxes, perform random number generation, sorting, and de-duplication functions, click the generation button to achieve the effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bigbox{
width:1000px;height: 600px;margin: auto;
}
</style>
</head>
<body>
<div id="bigbox">
<div class="box1">
<p> max:<input type="text" id="max"></p>
<p> min:<input type="text" id="min"></p>
<p>个数:<input type="text" id="num"></p>
<p><input type="submit" value="生成数组"id="tp1" ></p>
<a></a>
<p><input type="submit"value="排序" id="tp2"></p>
<b></b>
<p><input type="submit"value="去重" id="tp3"></p>
<c></c>
</div>
</body>
<script>
var oMax=document.getElementById("max")
var oMin=document.getElementById("min")
var oNum=document.getElementById("num")
var otp1= document.querySelector("#bigbox #tp1");
var otp2= document.querySelector("#bigbox #tp2");
var otp3= document.querySelector("#bigbox #tp3");
var aa = document.querySelector("#bigbox a")
var bb = document.querySelector("#bigbox b")
var cc = document.querySelector("#bigbox c")
console.log(aa)
console.log(bb)
console.log(cc)
var arr =[];
otp1.onclick = function(){
for(var i=0;i<oNum.value;i++){
arr[i]=radm(oMax.value,oMin.value)
}
aa.innerHTML = arr;
function radm(max,min){
return Math.round(Math.random()*(max-min)+min)
}
console.log(arr)
}
otp2.onclick = function(){
for (var k=0;k<arr.length-1;k++) {
for (var j=0;j<arr.length-k-1;j++) {
var sum;
if (arr[j]>arr[j+1]) {
sum=arr[j+1];
arr[j+1]=arr[j];
arr[j]=sum;
}
}
}
bb.innerHTML = arr;
console.log(arr)
}
otp3.onclick =function(){
for(var q = 0;q<arr.length;q++){
for (var e=q+1;e<arr.length;e++) {
if(arr[q]==arr[e]){
arr.splice(e,1);
e--;
}
}
}
console.log(arr);
cc.innerHTML = arr;
}
</script>
</html>
The content is for reference only. The simple design has specific questions, suggestions, private chat + comments, trouble you guys!