App下載

html循環(huán)代碼怎么寫？有幾種循環(huán)語句？

猿友 2021-06-16 10:40:28 瀏覽數 (17337)
反饋

在互聯網的熱潮中，不斷的涌現出很多的技術崗位。那么今天我們就來說下有關于“html循環(huán)代碼怎么寫？”這個問題吧！下面是小編的一些方法和代碼，希望對大家有所幫助。

1.首先我們新建個 .html 文件在文件中輸入下面這些代碼就可以實現循環(huán)了，會比較的相對簡單。代碼如下：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>循環(huán)的使用</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循環(huán)
        //數組的下標，從0到最后一個
        for(var j in  array1){
            document.write(j+"<br/>");
        }
        //語句塊{}
        {
            var num = 2;
        }
        document.write(num+"<br/>");
 </script>
</head>
<body>
</body>
</html>

在代碼中我們通過生成數組數據，在使用for循環(huán)進行遍歷，我們來看下結果；截圖如下：

for循環(huán)遍歷

我們看到在結果中數組按照?for?循環(huán)生成一組數據。說明我們的循環(huán)語句成功了。

2.下面是一些有關于在 Html 中的幾種循環(huán)語句。

(1)、while循環(huán)：

語法：?while(條件表達式) { 語句...  }；?

 while(條件表達式){
                語句...
            }

執(zhí)行流程：?while?語句在執(zhí)行時，先對條件表達式進行求值判斷，如果值為?true?，則執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后，繼續(xù)對表達式進行判斷如果為?true?，則繼續(xù)執(zhí)行循環(huán)體，以此類推 如果值為?false?，則終止循環(huán)

(2)、do...while循環(huán)：

語法：?do{ 語句...  } while(條件表達式)；?

  do{

       語句...

            }while(條件表達式)

執(zhí)行流程：?do...while?語句在執(zhí)行時，會先執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后，在對?while?后的條件表達式進行判斷，如果結果為?true?，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推如果結果為?false?，則終止循環(huán)實際上這兩個語句功能類似，不同的是?while?是先判斷后執(zhí)行，而?do...while?會先執(zhí)行后判斷，?do...while?可以保證循環(huán)體至少執(zhí)行一次，而?while?不能

(3)、for循環(huán)：

在for循環(huán)中，為我們提供了專門的位置用來放三個表達式：初始化表達式、條件表達式、更新表達式。

語法： ?for(初始化表達式、條件表達式、更新表達式){ 語句... }；?

 for(初始化表達式;條件表達式;更新表達式){
                語句...
            }

執(zhí)行流程：執(zhí)行初始化表達式，初始化變量（初始化表達式只會執(zhí)行一次）、執(zhí)行條件表達式，判斷是否執(zhí)行循環(huán)。如果為?true?，則執(zhí)行循環(huán)； 如果為?false?，終止循環(huán)；執(zhí)行更新表達式，更新表達式執(zhí)行完畢繼續(xù)重復。

3.循環(huán)嵌套：

在我們使用循環(huán)的使用是可以互相嵌套的，我們來看下代碼：

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';
     }
     //創(chuàng)建一個循環(huán)，往往需要三個步驟
     //1.創(chuàng)初始化一個變量
     var j = 0;
     //2.在循環(huán)中設置一個條件表達式
     while(j < aLi.length){
         aLi[j].style.background = 'gold';
         //3.定義一個更新表達式，每次更新初始化變量
         j++;
     }

這就是有關于嵌套循環(huán)的代碼，大家可以作為參考。

總結：

以上就是有關于“html循環(huán)代碼怎么寫？有幾種循環(huán)語句？”這個問題的一些相關內容，當然如果你有更好的想法也可以和大家一起分享學習，更多關于前端的內容我們都可以在W3cschool中學習和了解。


HTML

0 人點贊