JavaScript生成4位隨機數效果

admin發表於2017-04-16
JavaScript隨機

分享一段程式碼例項，它實現了生成四位隨機數的功能，並且數字顏色也會隨機變化。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  margin: 100px auto;
  width: 200px;
  height: 150px;
  line-height: 150px;
  letter-spacing: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  border: 2px solid palegreen;
  word-wrap: break-word;
  border-radius: 5px;
  position: relative;
}
#btn {
  position: absolute;
  left: 50%;
  top: 280px;
}
</style>
<script>
window.onload=function(){
  var box=document.getElementById("box");
  var span=document.getElementsByTagName("span");
  var btn=document.getElementById("btn");
  var color="";
  var str="0123456789abcdef";
  btn.onclick=function(){
    for (var index = 0; index < span.length; index++) {
      for(var j=0;j<6;j++){
        color+=str.substr(parseInt(Math.random()*str.length),1);
      }
      span[index].innerHTML = parseInt(Math.random() * 10);
      span[index].style.color = ("#" + color);
      color="";
    }
  }
}
</script>
</head>
<body>
  <div id="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
  <input type="button" id="btn" value="檢視演示" />
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var box=document.getElementById("box")，獲取指定id的元素物件。

（3）.var color=""，用來儲存顏色值。

（4）.var str="0123456789abcdef"，組成十六進位制顏色值的字元。

（5）.btn.onclick=function(){}，為按鈕註冊click事件處理函式。

（6）.for (var index = 0; index < span.length; index++) ,通過for迴圈生成指定位數的數字。

（7）.for(var j=0;j<6;j++){

  color+=str.substr(parseInt(Math.random()*str.length),1);

},生成十六進位制顏色值。

（8）.span[index].innerHTML = parseInt(Math.random() * 10)，為對應索引的span元素新增隨時生成的0-9的數字。

（9）.span[index].style.color = ("#" + color)，設定數字顏色。

（10）. color=""，清空儲存顏色的字串，防止下一次生成顏色時出現累加問題。

二.相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.substr()參閱javascript substr()一章節。

（3）.document.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（4）.parseInt()參閱javascript parseInt()一章節。

（5）.Math.random()參閱javascript Math.random()一章節。

（6）.innerHTML屬性參閱innerHTML一章節。

相關文章