Javascript計時問題

Question

我是javascript新手，創建了以下代碼：

 <script>
  function text(){
  var testone=Math.floor(Math.random()*9);
  document.fgColor="green";
  document.bgColor="black";
  document.write(testone+" "+testone+"<br/>");
   }
  setInterval(text,100);
 </script>

在兩列中出現數字，一一出現在下。我想讓第二列中的數字稍后出現。有什么建議嗎？

Answer 1

使用您編寫代碼的方式將無法正常工作。

相反，我建議使用css樣式來完成所需的操作。

這是我將如何做（給予或接受）的一般想法。

<script>
 // Code goes here
  var b = document.body;
  function text() {
    var testone=Math.floor(Math.random()*9);
    var d = document.createElement('div');
    d.innerHTML += '<span>' + testone + '</span>&nbsp';
    d.innerHTML += '<span style="display:none">' + testone + '</span>';

    setTimeout(function() {
      var childs = d.children;
      for(i = 0; i < childs.length; ++i) {
        childs[i].style.display = 'inline';        
      }      
    },500);

    b.appendChild(d);
  }

  setInterval(text,100);
</script>

注意：要使上述代碼正常運行，腳本標簽必須在body標簽內部執行（否則document.body為null）。

該代碼顯示了實際的代碼。

http://plnkr.co/edit/JNJpaH2qEDwEl56C9YpU

我還采取了一些自由措施，例如使用<div>而不是<br> ，並且我不擔心每1/​​2秒進行dom回流的效率。