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，并计算所有数字的和。