jquery簡單生成指定範圍隨機數效果

antzone發表於2017-04-18
jQuery隨機

本章節分享一段程式碼例項，它實現了生成簡單隨機數的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var ran=0;
var range=0;
var myNumber;
 
function sjs(range) {
  ran=Math.random()*range;
  var result=parseInt(ran);
  return result;
}
 
function showRandomNum() {
  var figure=sjs(range);
  $("#first").html(figure);  
}
 
$(function () {
  $("#start").click(function () {
    $("#start")[0].disabled=true;
    $("#stop")[0].disabled=false;
    range=prompt("請輸入隨機數範圍：","");
    myNumber=setInterval(showRandomNum,1);
  });
 
  $("#stop").click(function () {
    $("#start")[0].disabled=false;
    $("#stop")[0].disabled=true;
    clearInterval(myNumber);
  });
});
</script>
</head>
<body>
<div id="first"></div>
<input type="button" value="開始" id="start">
<input type="button" value="結束" id="stop">
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var ran=0,宣告一個變數並賦初值為0，用來儲存原始的隨機數。

（2）.var range=0，宣告一個變數並賦初值為0，用來儲存輸入的數字。

（3）.var myNumber，宣告一個變數，用來儲存定時器函式的標識。

（4）.function sjs(range) {

  ran=Math.random()*range;

  var result=parseInt(ran);

  return result;

}，此函式可以生成一個被轉換為整數的隨機數。

（5）.function showRandomNum() {

  var figure=sjs(range);

  $("#first").html(figure);  

}，將隨機數寫入指定元素。

（6）.$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（7）.$("#start").click(function () {

  $("#start")[0].disabled=true;

  $("#stop")[0].disabled=false;

  range=prompt("請輸入隨機數範圍：","");

  myNumber=setInterval(showRandomNum,1);

})，點選開始按鈕後，會將開始按鈕設定為不可用，停止按鈕設定為可用。

並且彈出輸出視窗。

輸入數字後，就會執行定時器函式，出現數字輪播效果。

（8）.$("#stop").click(function () {

  $("#start")[0].disabled=false;

  $("#stop")[0].disabled=true;

  clearInterval(myNumber);

})，停止數字輪播效果。

二.相關閱讀:

（1）.Math.random()可以參閱javascript Math.random()一章節。

（2）.parseInt()可以參閱javascript parseInt()一章節。

（3）.prompt()可以參閱prompt()一章節。

（4）.setInterval()可以參閱setInterval()一章節。

（5）.clearInterval()可以參閱clearInterval()一章節。

相關文章