溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

html的循環(huán)代碼如何寫(xiě)

發(fā)布時(shí)間：2022-02-22 09:43:03 來(lái)源：億速云 閱讀：1001 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“html的循環(huán)代碼如何寫(xiě)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“html的循環(huán)代碼如何寫(xiě)”吧!

1.首先我們新建個(gè) .html 文件在文件中輸入下面這些代碼就可以實(shí)現(xiàn)循環(huán)了，會(huì)比較的相對(duì)簡(jiǎ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];
        //遍歷數(shù)據(jù) 利用下標(biāo)的變化
        for(var i=0;i<array1.length;i++){
            document.write(array1[i]+"<br/>");
        }
        //for in循環(huán)
        //數(shù)組的下標(biāo)，從0到最后一個(gè)
        for(var j in  array1){
            document.write(j+"<br/>");
        }
        //語(yǔ)句塊{}
        {
            var num = 2;
        }
        document.write(num+"<br/>");
 </script>
</head>
<body>
</body>
</html>

在代碼中我們通過(guò)生成數(shù)組數(shù)據(jù)，在使用for循環(huán)進(jìn)行遍歷，我們來(lái)看下結(jié)果；截圖如下：

html的循環(huán)代碼如何寫(xiě)

我們看到在結(jié)果中數(shù)組按照for循環(huán)生成一組數(shù)據(jù)。說(shuō)明我們的循環(huán)語(yǔ)句成功了。

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

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

語(yǔ)法：while(條件表達(dá)式) { 語(yǔ)句...  }；

 while(條件表達(dá)式){
                語(yǔ)句...
            }

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

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

語(yǔ)法：do{ 語(yǔ)句...  } while(條件表達(dá)式)；

  do{       語(yǔ)句...            }while(條件表達(dá)式)

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

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

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

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

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

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

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

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

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

到此，相信大家對(duì)“html的循環(huán)代碼如何寫(xiě)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手