В этом уроке мы должны продемонстрировать, как использовать вложенный цикл в HTML и Javascript для создания красивого дизайна календаря. Я надеюсь, что вы узнаете что-то из этого кода.

Вложенный цикл — это цикл внутри цикла, цикл — это двумерный внутренний цикл, а внешний цикл. Внутренний цикл вложен во внешний цикл.

Во-первых, мы исходим из значения, которое значение сначала передает внешнему циклу, запускает внутренний цикл, который выполняет процесс. а затем второй проход внешнего цикла снова и снова запускает внутренний цикл, пока оператор не завершится.

for( var i= 0 ;i<10;i++){ for(var j=0;j<10;j++){ //something else } }
<html> <head> <title>Nested Loop in HTML</title> </head> <body> <h1 style="text-align: center;">DailyAspirants.com DEMO</h1> <div> <ul class="weekdays"> <li>Mon</li> <li>Tue</li> <li>Wed</li> <li>Thu</li> <li>Fri</li> <li>Sat</li> <li>sun</li> </ul> </div> <div id="days"></div> <div class="bottom"></div> </body> </html>

Первый цикл обычно называют внешним циклом. а затем запускает внешний цикл и внутренний цикл до 10 раз каждый. Внутренний цикл выполняет отдельные цифры, в то время как вызов внешнего цикла снова и снова определяет, сколько раз повторяется задача.

Например: если вы читаете книгу и файл книги построчно, и для каждой строки нужно подсчитать, сколько раз эта строка встречается там до конца инструкции.

ul { list-style-type: none; } .weekdays { width:738px; margin: 0 auto; padding: 10px 0; background-color:#1abc9c; } .weekdays li { display: inline-block; width: 13.6%; color: #fff; text-align: center; } #days { width:738px; padding:10px 0; background:#eee; margin:0 auto; } td { padding:41px; font-size:20px; color: #777; } td:hover { background: #1abc9c; color: white !important } .active { background-color: #009688; color:#fff; } .bottom { margin-bottom: 30px; }

Вложенный цикл с использованием HTML и javascript создает красивый дизайн календаря и отображает его ниже. как выглядит календарь, и вы скопировали код и протестировали его в своем браузере.

var days= document.getElementById('days'); var table=document.createElement("table"); var rows=5; var cols=7; var counter=1; var todaysDate = new Date().getDate(); for(var i=1;i<=rows;i++){ var tr=document.createElement("tr"); for(var j=1;j<=cols;j++) { var td=document.createElement("td"); var cellText =document.createTextNode(counter); if(counter==todaysDate){td.className="active";} if(counter<=31){ ++counter; } else { break; } td.appendChild(cellText); tr.appendChild(td); } table.appendChild(tr); } days.appendChild(table);

Надеюсь, вы научитесь использовать вложенный цикл в HTML и javascript для создания красивого календаря и блока операторов цикла. Продолжайте поддерживать нас, скопируйте код и протестируйте его в своем браузере и загрузите код по ссылке ниже.

Первоначально опубликовано на https://www.dailyspirants.com.