HTML for循環詳解

一、htmlfor循環代碼

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

HTML中的for循環可用於遍曆數組或對象，並在每個項上執行相同的操作。上面的代碼片段是一個ul元素，其中有5個li元素。如果我們要在每個li元素上添加相同的class屬性，我們可以使用for循環。

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
</ul>

<script>
for (var i = 0; i < document.getElementsByTagName('li').length; i++) {
   document.getElementsByTagName('li')[i].classList.add('item');
}
</script>

上述代碼使用for循環遍歷了5個li元素，並將class屬性添加到每個元素中。

二、htmlfor循環中循環了7次

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

<script>
for (var i = 0; i < 7; i++) {
   document.write("<li>Item " + (i+1) + "</li>");
}
</script>

上述代碼生成了一個ul元素，其中包含7個li元素。for循環以下標從0開始，循環了7次並輸出了7個li元素。

三、htmlfor循環標籤

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<script>
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
   list[i].setAttribute('class', 'item');
}
</script>

上述代碼在ul元素下查找所有的li元素，並為每個li元素添加class屬性。該方法使用setAttribute()函數設置class屬性。

四、htmlfor循環100次

<script>
for (var i = 1; i <= 100; i++) {
   document.write(i);
   document.write("<br>");
}
</script>

該代碼循環100次，輸出1到100的數字。

五、htmlfor循環遍歷div

<div id="myDiv">
   <p>This is paragraph 1</p>
   <p>This is paragraph 2</p>
   <p>This is paragraph 3</p>
</div>

<script>
var myDiv = document.getElementById('myDiv');
var children = myDiv.childNodes;
for (var i = 0; i < children.length; i++) {
   document.write(children[i].nodeName);
   document.write("<br>");
}
</script>

上述代碼遍歷了id為myDiv的div元素中所有的子節點，並輸出了每個子節點的名稱。

六、htmlfor循環愛心代碼

<canvas id="myCanvas" width="100" height="100"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 45;

context.beginPath();
context.moveTo(centerX,centerY);
context.bezierCurveTo(centerX + 30, centerY - 60, centerX + 90, centerY - 60, centerX, centerY + radius);
context.bezierCurveTo(centerX - 90, centerY - 60, centerX - 30, centerY - 60, centerX, centerY);
context.fillStyle = 'red';
context.fill();
</script>

該代碼使用canvas元素創建一個愛心圖案。使用bezierCurveTo()函數中的貝塞爾曲線指定愛心的形狀，使用fill()函數填充紅色。

七、htmlfor循環輸出代碼

<script>
var greeting = "Hello, World!";
for (var i = 0; i < greeting.length; i++) {
   document.write(greeting.charAt(i));
   document.write("<br>");
}
</script>

上述代碼將字符串"Hello, World!"循環，並輸出每個字符及其ASCII碼值。

八、htmlfor循環打印1-100的偶數

<script>
for (var i = 1; i <= 100; i++) {
   if ( i % 2 == 0) {
      document.write(i);
      document.write("<br>");
   }
}
</script>

該代碼循環1到100，並輸出所有偶數。

九、htmlfor循環1到一百基數的和

<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
   if ( i % 2 !== 0) {
      sum += i;
   }
}
document.write(sum);
</script>

上述代碼循環1到100，並計算所有奇數的和。

十、htmlfor循環1加到一百

<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
   sum += i;
}
document.write(sum);
</script>

該代碼循環1到100，並計算所有數字的和。