html循环代码怎么写？有几种循环语句？

2021-06-16 10:40:28 浏览数 (2)

在互联网的热潮中，不断的涌现出很多的技术岗位。那么今天我们就来说下有关于“html循环代码怎么写？”这个问题吧！下面是小编的一些方法和代码，希望对大家有所帮助。

1.首先我们新建个 .html 文件在文件中输入下面这些代码就可以实现循环了，会比较的相对简单。代码如下：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>循环的使用</title>
    <script type="text/javascript">
        var  array1 = [1,4,2,5,7,8];
        //遍历数据 利用下标的变化
        for(var i=0;i<array1.length;i++){
            document.write(array1[i]+"<br/>");
        }
        //for in循环
        //数组的下标，从0到最后一个
        for(var j in  array1){
            document.write(j+"<br/>");
        }
        //语句块{}
        {
            var num = 2;
        }
        document.write(num+"<br/>");
 </script>
</head>
<body>
</body>
</html>

在代码中我们通过生成数组数据，在使用for循环进行遍历，我们来看下结果；截图如下：

for循环遍历

我们看到在结果中数组按照​for​循环生成一组数据。说明我们的循环语句成功了。

2.下面是一些有关于在 Html 中的几种循环语句。

(1)、while循环：

语法：​while(条件表达式) { 语句...  }；​

 while(条件表达式){
                语句...
            }

执行流程：​while​语句在执行时，先对条件表达式进行求值判断，如果值为​true​，则执行循环体，循环体执行完毕以后，继续对表达式进行判断如果为​true​，则继续执行循环体，以此类推 如果值为​false​，则终止循环

(2)、do...while循环：

语法：​do{ 语句...  } while(条件表达式)；​

  do{

       语句...

            }while(条件表达式)

执行流程：​do...while​语句在执行时，会先执行循环体，循环体执行完毕以后，在对​while​后的条件表达式进行判断，如果结果为​true​，则继续执行循环体，执行完毕继续判断以此类推如果结果为​false​，则终止循环实际上这两个语句功能类似，不同的是​while​是先判断后执行，而​do...while​会先执行后判断，​do...while​可以保证循环体至少执行一次，而​while​不能

(3)、for循环：

在for循环中，为我们提供了专门的位置用来放三个表达式：初始化表达式、条件表达式、更新表达式。

语法： ​for(初始化表达式、条件表达式、更新表达式){ 语句... }；​

 for(初始化表达式;条件表达式;更新表达式){
                语句...
            }

执行流程：执行初始化表达式，初始化变量（初始化表达式只会执行一次）、执行条件表达式，判断是否执行循环。如果为​true​，则执行循环； 如果为​false​，终止循环；执行更新表达式，更新表达式执行完毕继续重复。

3.循环嵌套：

在我们使用循环的使用是可以互相嵌套的，我们来看下代码：

window.onload = function(){
     var oList = document.getElementById('list01');
     var aLi = oList.getElementsByTagName('li');
     for (var i = 0; i < aLi.length; i++) {
         if(i % 2 == 0){
             aLi[i].style.background = 'gold';
         }
     }
     for(var j in aLi){
         aLi[j].style.background = 'red';
     }
     //创建一个循环，往往需要三个步骤
     //1.创初始化一个变量
     var j = 0;
     //2.在循环中设置一个条件表达式
     while(j < aLi.length){
         aLi[j].style.background = 'gold';
         //3.定义一个更新表达式，每次更新初始化变量
         j++;
     }

这就是有关于嵌套循环的代码，大家可以作为参考。

总结：

以上就是有关于“html循环代码怎么写？有几种循环语句？”这个问题的一些相关内容，当然如果你有更好的想法也可以和大家一起分享学习，更多关于前端的内容我们都可以在W3cschool中学习和了解。


HTML

0 人点赞