<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 创建三个输入框和三个按钮 -->
<!-- 前面两个输入框进行数字的输入,随机输入的数值,其实没有大小的硬性要求,在下面封装的随机数值中都可以得到想要的数值. -->
max: <input type="text" name="" id="txt1">
min: <input type="text" name="" id="txt2">
num: <input type="text" name="" id="txt3">
<input type="button" name="" id="btn1" value="生成">
<input type="button" name="" id="btn2" value="排序">
<input type="button" name="" id="btn3" value="去重">
</body>
<script>
// 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；
// 在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数；点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。
// 每次点击之后使结果显示在控制台
//先对输入框声明变量
var oTxt1=document.getElementById("txt1");
var oTxt2=document.getElementById("txt2");
var oTxt3=document.getElementById("txt3");
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oBtn3=document.getElementById("btn3");
//生成长度为num的数组
oBtn1.onclick=function(){
var oMax=oTxt1.value; //在这里我们要注意千万不要把这里的变量写在函数的外部,
var oMin=oTxt2.value; //那样虽然不会报错但是也显示不出结果
var oNum=oTxt3.value;
var arr=new Array(oNum);
for(var i=0;i<oNum;i++){
arr[i]=fun(oMax,oMin);
}console.log(arr);
// 在这边是我们需要封装的函数,封装好的函数可以方便我们以后需要使用的时候可以直接提用
// 函数的封装就是为了能够选择使用,重复使用,忽略细节,简单一句就是为了方便
// 范围随机数
function fun(max,min){
return Math.round(Math.random()*(max-min)+min);//在这了其实max和min的顺序调换了也没事
}
//数组的排序
//数组的排序最重要的一点就是要遍历，在这里我用到的是数组的冒泡排序，还有很多的方法可以，这就需要我们自己去增加自己的练习了。
oBtn2.onclick= function(){
for(var i=0; i<arr.length;i++){
for(var j=0; j<arr.length-i;j++){
if (arr[j]>arr[j+1]) {
var ls=arr[j];
arr[j]=arr[j+1];
arr[j+1]=ls;
}
}
}
console.log(arr);
}
//去重
//这边去重我运用的方法是，在数组的内部提取一个元素然后进行一一比较，如果相同那就删除。不过这边要记住一个遇到的一个BUG，如果遇到两个连续的相同的元素，就可能导致后一位的现铜元素被跳过，所以在这里我们要J--，让循环一次之后将比照的元素在往前进一位，这样子就不会有这个BUG出现了。
oBtn3.onclick= function (){
for(var i=0;i<arr.length;i++){
for(var j=i+1; j<arr.length; j++){
if (arr[i]==arr[j]) {
arr.splice(j,1);
j--;
}
}
}
console.log(arr);
}
}
</script>
</html>
