創建一個相同風格的for循環

這就是我想要的1,2,3,4,5。 它們應該都是相同的樣式。創建一個相同風格的for循環

但是當我運行我的代碼時，我只能得到（5）;

有人可以幫忙嗎？

<p id= "text-1"> this </p> 

p#text-1{ 
    color:blue; 
    font-size:20px; 
    padding:10px; 
    width:20px; 
    height:20px; 
    background:gold; 
    text-align:center; 
} 

function forloop(){ 
    for(x = 0; x<=3; x++){ 
    document.getElementById('text-1').innerHTML = x; 
    } 
} 
forloop();

來源

2017-02-01 cord

我不敢相信你真的在所有'x <= 3'上得到5。請發佈您的實際代碼。 –

這是我正在嘗試製作的鏈接，是的，你是對的它不是5它3. – cord

http://codepen.io/2bu/pen/zNWvWo – cord

如果你想以編程方式創建從1去3的列表，那麼你可以做這樣的：這只是基於你在這裏說什麼

<html> 
    <head> 
    <style> 
     p#text-1{ 
     color:blue; 
     font-size:20px; 
     padding:10px; 
     width:20px; 
     height:20px; 
     background:gold; 
     text-align:center; 
     } 
    </style> 
    <script> 
     function forloop(){ 
     var MAX = 3; 
     for(x=1; x<=MAX; x++) { 
      document.getElementById('text-1').innerHTML += x; 
      if(x < MAX) { 
      document.getElementById('text-1').innerHTML += ", "; 
      } 
     } 
     } 
    </script> 
    </head> 
    <body onLoad="forloop()"> 
    <p id= "text-1"></p> 
    </body> 
</html>

注，將所需內容直接放入頁面會更簡單。這個答案是基於這樣的假設，你不會總是想要一個確切的3個數字的列表。

還要注意你的div不夠寬，不能包含所有3個數字。你需要確保你的樣式是你想要的，但這超出了這個答案的範圍。

編輯：如果你想在自己的箱子每個編號，然後將它改變，像這樣：

<style> 
    span.numblock { 
     color:blue; 
     font-size:20px; 
     padding:10px; 
     width:20px; 
     height:20px; 
     background:gold; 
     text-align:center; 
    } 
    </style>

和

<script> 
     function forloop(){ 
     var MAX = 3; 
     for(x=1; x<=MAX; x++) { 
      document.getElementById('text-1').innerHTML += "<span class='numblock'>"+x+"</span>"; 
      if(x < MAX) { 
      document.getElementById('text-1').innerHTML += ", "; 
      } 
     } 
     } 
    </script>

的onload事件（）剛剛拿到劇本跑。你可能不需要它，這取決於它將存在的上下文。

來源

2017-02-01 18:36:33 Phil

感謝您的幫助，它接近我試圖創建的效果。將每個數字想象爲正方形，每邊都填充20像素。每個數字都應該有它自己的正方形，具有相同的20px填充。我不知道我是否清楚，但它是解釋效果的最佳方式。另外爲什麼我需要一個onload？ – cord

創建一個相同風格的for循環

回答

相關問題