JavaScript隨機(jī)輸入兩個數(shù),得到這兩個數(shù)之間的隨機(jī)數(shù)數(shù)組,且能排序

功能

1.用js實現(xiàn)隨機(jī)輸入兩個數(shù),選取兩個數(shù)之間的10個數(shù)字,存入一個數(shù)組,按從小到大排序
2.防止輸入的不是數(shù)字,返回空,提示輸入數(shù)字
3.只有兩個數(shù)都輸入才能進(jìn)行隨機(jī)生成數(shù)存入數(shù)組

效果圖

不輸入.png
輸入.png

以下是主要代碼實現(xiàn):

// 監(jiān)聽input的輸入規(guī)范
inputObjs[i].oninput = function () {
      var reg = /\D/g;
      this.value = this.value.replace(reg, '');
    };
    inputObjs[i].onpaste = function () {
      return false; 
    };
// 生成一個隨機(jī)數(shù)
function randomNum(n, m) {
    var num = parseInt(Math.abs(Math.random() * (m - n) + n));
    return num;
  }
// 10個隨機(jī)數(shù)組成數(shù)組
for (var i = 0; i < 10; i++) {
    arr.push(randomNum(n, m));
  }
// 排序數(shù)組
function sequentialArray(arr) {
    var temp = arr.sort(function (a, b) {
      return a - b;
    });
    return temp;
  }

以下是全部代碼:

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input{
      width: 100px;
    }
  </style>
</head>

<body>
  <h3>請輸入兩個數(shù)字,得到兩數(shù)之間[n,m)的一個任意排序數(shù)組</h3>
  <input type="text" placeholder="請輸入任意數(shù)字">
  <input type="text" placeholder="請輸入任意數(shù)字">
  <button id="btn">排序數(shù)組</button>
  <p></p>
  <p></p>
</body>

</html>
<script>
  var inputObjs = document.getElementsByTagName('input');
  var buttonObj = document.getElementById('btn');
  var pObjs = document.getElementsByTagName('p');

  for (var i = 0; i < inputObjs.length; i++) {
    inputObjs[i].oninput = function () {
      var reg = /\D/g;
      this.value = this.value.replace(reg, '') // 除了0-9都替換空值
    };
    inputObjs[i].onpaste = function () {
      return false;
    }
  }
  buttonObj.onclick = function () {
    if (inputObjs[0].value == '') {
      console.log('請輸入第一個數(shù)');
    } else if (inputObjs[1].value == '') {
      console.log('請輸入第二個數(shù)');
    } else {
      var arr = [];
      var n = Number(inputObjs[0].value);
      var m = Number(inputObjs[1].value);
      function randomNum(n, m) {
        var num = parseInt(Math.abs(Math.random() * (m - n) + n));
        return num;
      }
      for (var i = 0; i < 10; i++) {
        arr.push(randomNum(n, m));
      }
      function sequentialArray(arr) {
        var temp = arr.sort(function (a, b) {
          return a - b;
        });
        return temp;
      }
      console.log('生成數(shù)組',arr);
      pObjs[0].innerText = "生成數(shù)組:" + arr;
      console.log('排序數(shù)組',sequentialArray(arr));
      pObjs[1].innerText = "排序數(shù)組:" + sequentialArray(arr);
    }
  }
</script>

總結(jié)

代碼還需優(yōu)化

以上所有如有bug,請及時告知,你我共同進(jìn)步,謝謝~
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.用js實現(xiàn)隨機(jī)選取10~100之間的10個數(shù)字,存入一個數(shù)組,并排序 //要是獲取不重復(fù)的,則對隨機(jī)數(shù)...
    persistlu閱讀 5,891評論 0 0
  • 官網(wǎng) 中文版本 好的網(wǎng)站 Content-type: text/htmlBASH Section: User ...
    不排版閱讀 4,727評論 0 5
  • 第四天 數(shù)組【悟空教程】 第04天 Java基礎(chǔ) 第1章數(shù)組 1.1數(shù)組概念 軟件的基本功能是處理數(shù)據(jù),而在處理數(shù)...
    Java幫幫閱讀 1,684評論 0 9
  • 1、用C語言實現(xiàn)一個revert函數(shù),它的功能是將輸入的字符串在原串上倒序后返回。 2、用C語言實現(xiàn)函數(shù)void ...
    希崽家的小哲閱讀 6,704評論 0 12
  • 從大阪回來,包里裝的是沉甸甸的黑膠唱片?;叵肫疬@二十多年的音樂音響歷程,感覺有必要寫個小文紀(jì)念一下。 九十年代的時...
    clbt閱讀 854評論 2 2

友情鏈接更多精彩內(nèi)容