> 文档中心 > 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)


从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(JS)

复习:从零开始学前端:if判断,for循环,switch判断 — 今天你学习了吗?(JS:Day4)

文章目录

  • 从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(JS)
    • 前言
    • 第五节课:上节课案例+break,continue以及while和do while
      • 一、案例1:发表信息
      • 二、案例2:JS轮播图
      • 三、break停止循环
      • 四、continue跳出
      • 五、while
      • 六、do while
      • 七、死循环

前言

半夜趴在这里整理复习,感觉很冷然后拿了一件毛衣套了上去…今天温度3~16°…

第五节课:上节课案例+break,continue以及while和do while

一、案例1:发表信息

图例:
在这里插入图片描述

我的问题:
我卡在了点击输入框,然后输出的地方,后来发现可以通过img.src获取图片地址以及通过innerHTML获取信息然后就是头像串位置,总是使用第一张图片当头像,发表的时候第二张头像不出来,以为是赋值有问题,最后发现是判断的问题,判断写成了赋值,我可真是糊涂啊~

我的代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> * {     margin: 0;     padding: 0; } #wrap {     width: 500px;     height: 40px;     background-color: #f0f;     margin: 50px auto 0;     padding: 10px; } .title img {     display: none;     position: absolute;     width: 40px;     height: 40px;     border-radius: 50%; } .title img.active {     display: block; } .content {     display: none;     float: left;     width: 300px;     /* height:30px; */     /* background-color: #0ff; */     margin-left: 50px; } .content>input {     width: 210px;     height: 32px; } .content .btn {     float: right;     width: 60px;     height: 36px; } .add {     float: right;     width: 70px;     height: 35px;     font-size: 30px; } .list {     width: 520px;     /* height:100px; */     border: 2px solid #f0f;     margin: 50px auto 0;     display: none; } .list li {     list-style: none;     height: 50px;     border: 1px dashed #ccc;     padding-bottom: 5px; } .list li img {     float: left;     width: 50px;     height: 50px;     border-radius: 50%; } .list p {     float: left;     line-height: 50px;     text-indent: 20px; }    </style></head><body>    <div id="wrap"> <div class="title">     <img src="images/01.jpg" class='active' alt="">     <img src="images/02.jpg" alt="">     <div class="content">  <input type="text" />  <button class="btn">发表</button>     </div> </div> <button class="add"> + </button>    </div>    <ul class="list"> <!-- 
  • 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

    这里就是我的内容

  • 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

    这里就是我的内容

  • -->
    </ul> <script> var people = 1; // 点击头像换头像 var imgChange = document.getElementsByTagName("img"); imgChange[0].onclick = function () { imgChange[0].style.display = "none"; imgChange[1].style.display = "block"; people = 2; } imgChange[1].onclick = function () { imgChange[0].style.display = "block"; imgChange[1].style.display = "none"; people = 1; } // 点击加号显示隐藏输入框 var add = document.getElementsByClassName("add")[0]; var content = document.getElementsByClassName("content")[0]; // 判断奇偶 var num = 1; add.onclick = function () { if (num % 2 == 0) { content.style.display = "none" } else { content.style.display = "block" } num++; } // 点击发表按钮发表 var publish = document.getElementsByClassName("btn")[0]; var list = document.getElementsByClassName("list")[0]; var inp = document.getElementsByTagName("input")[0]; publish.onclick = function () { if (inp.value == '') { alert("您未输入!") } else { list.style.display = "block" if (people == 1) { list.innerHTML += '
  • <img src="' + imgChange[0].src + '" alt="">

    ' + inp.value + '

  • '
    } else if (people == 2) { list.innerHTML += '
  • <img src="' + imgChange[1].src + '" alt="">

    ' + inp.value + '

  • '
    } } inp.value = '' }
    </script></body></html>

    教学代码:

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>     *{     margin:0;     padding:0; } #wrap{     width: 500px;     height: 40px;     background-color:#f0f;     margin:50px auto 0;     padding:10px; } .title img{     display:none;     position: absolute;     width:40px;     height:40px;     border-radius:50%; } .title img.active{     display:block; } .content{     display:none;     float:left;     width:300px;     /* height:30px; */     /* background-color: #0ff; */     margin-left:50px; } .content > input{     width:210px;     height:32px; } .content .btn{     float:right;     width:60px;     height:36px; } .add{     float:right;     width:70px;     height:35px;     font-size:30px; } .list{     width: 520px;     /* height:100px; */     border:2px solid #f0f;     margin:50px auto 0;     display:none; } .list li{     list-style:none;     height:50px;     border:1px dashed #ccc;     padding-bottom:5px; } .list li img{     float: left;     width:50px;     height:50px;     border-radius:50%; } .list p {     float:left;     line-height:50px;     text-indent:20px; }    </style></head><body> <div id="wrap"> <div class="title">     <img src="images/01.jpg" class='active' alt="">     <img src="images/02.jpg" alt="">     <div class="content">  <input type="text" />  <button class="btn">发表</button>     </div> </div> <button class="add"> + </button>    </div>    <ul class="list"> <!-- 
  • 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

    这里就是我的内容

  • 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

    这里就是我的内容

  • -->
    </ul> <script> var add = document.getElementsByClassName('add')[0], con = document.getElementsByClassName( 'content' )[0], btn = document.getElementsByClassName( "btn" )[0], inp = document.getElementsByTagName( 'input' )[0], imgs = document.querySelectorAll( ".title img" ), list = document.getElementsByClassName('list')[0], flag = false, //设置开关,来控制显示与隐藏; picSrc = imgs[0].src console.log( picSrc ) //+号的显示与隐藏 add.onclick = function(){ // alert( 123 ) if( flag ){ console.log( 1 ) con.style.display = 'none' flag = false; }else{ console.log( 2 ) con.style.display = 'block' flag = true } } //图片切换 imgs[0].onclick = function(){ // imgs[0].className = '' this.className = '' imgs[1].className = 'active' picSrc = imgs[1].src } imgs[1].onclick = function(){ this.className = '' imgs[0].className = 'active' picSrc = imgs[0].src } //内容发表 btn.onclick = function(){ var str = inp.value; if( str !== '' ){ list.style.display = 'block'; // list.innerHTML += '
  • 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

    这里就是我的内容

  • '
    // list.innerHTML += '
  • 从零开始学前端:上节课案例+break,continue以及while和do while --- 今天你学习了吗?(JS:Day5)

    '+str+'

  • '
    list.innerHTML += '
  • <img src="'+picSrc+'" alt="">

    '+str+'

  • '
    inp.value = "" } // alert( inp.value ) }
    </script></body></html>

    二、案例2:JS轮播图

    图例:
    在这里插入图片描述
    我的问题:
    请大家一定要注意,声明数组的时候,要用同一种引号,不然就会出现逗号,然后布局的话,刚开始不会做,后面自己稀里糊涂做出来了,就是谁用绝对定位我用的有点蒙,上面的12345/5比较好做,下面的ABCDE,我的问题就是出现了“,”,就是,自己给自己整晕了,图片下标是01234,但是当时做的时候,左循环和有循环的数字差了一位数!后来改了改,图片又出现了,135的状况。。。目前下面的代码还有问题,本来运行好了,但是写文的时候,突然又有问题了,可能是我不小心改了哪里,但是太晚了,准备明天再看~

    我的代码(注意:目前还有问题,稍后修复!):

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> * {     margin: 0;     padding: 0; } ul {     list-style: none; } #wrap {     position: relative;     width: 529px;     height: 300px;     /* border:2px solid #000; */     margin: 100px auto 0;     user-select: none; } ul li.active {     display: block; } ul li {     display: none;     position: absolute;     width: 529px;     height: 300px; } .btn {     position: absolute;     width: 25px;     height: 50px;     background-color: rgba(0, 0, 0, 0.5);     color: #fff;     font-size: 20px;     text-align: center;     line-height: 50px;     cursor: pointer;     top: calc(50% - 25px); } .right {     right: 0; } .checkBtn {     position: absolute;     top: -30px;     /* width:75px; */     height: 30px; } .checkBtn span {     float: left;     width: 75px;     height: 30px;     background-color: #ccc;     font-size: 14px;     color: #fff;     text-align: center;     line-height: 30px;     cursor: pointer; } .checkBtn span.on {     background-color: #90f; } p.description {     position: absolute;     width: 100%;     height: 30px;     background-color: rgba(0, 0, 0, 0.3);     text-align: center;     line-height: 30px;     font-weight: bold;     color: #fff; } p.top {     top: 0; } p.bottom {     bottom: 0; }    </style></head><body>    <div id="wrap"> <div class="checkBtn">     <span class='on'> 循环切换 </span>     <span> 单边切换 </span> </div> <ul>     <li class='active'><img src="images/1.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/2.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/3.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/4.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/5.jpg" alt="" width='100%' height='100%'></li> </ul> <div class="btn left">     < </div>  <div class="btn right"> > </div>  <p class="description top"> <span class='text'>1</span>/5 </p>  <p class="description bottom"> A </p> </div> <script>     var page = 0;     var state = 1;     var num = 1;     var name = ["A", "B", "C", "D", "E"];     console.log(name);     // 循环切换与单边切换     var change = document.getElementsByTagName("span");     change[0].onclick = function () {  change[0].style.backgroundColor = "#90f";  change[1].style.backgroundColor = "#ccc";  state = 1;  console.log(state, '循环切换');     }     change[1].onclick = function () {  change[0].style.backgroundColor = "#ccc";  change[1].style.backgroundColor = "#90f";  state = 2;  console.log(state, '单边切换');     }     // 点击左右切换图片     var btn = document.getElementsByClassName("btn")     var li = document.getElementsByTagName("li")     // 获取描述     var description = document.getElementsByClassName("description")     console.log(description[0].innerHTML, description[0].innerText)     // 左按钮     btn[0].onclick = function () {  // 单边  if (state == 2) {      if (page == 0) {   alert("前面没有了哦~☹")      } else {   li[page].style.display = "none"   li[page - 1].style.display = "block"   page--      }      // 循环  } else if (state == 1) {      li[page].style.display = "none"      console.log(page)      if (page == 0) {   page = page + 5   description[0].innerHTML = "" + page + "/5 "   console.log(description[1].innerHTML)   description[1].innerHTML = name[page]   li[page - 1].style.display = "block"   page--      } else {   description[0].innerHTML = "" + page + "/5 "   console.log(description[1].innerHTML)   li[page - 1].style.display = "block"   page--      }  }     }     // 右按钮     btn[1].onclick = function () {  // 单边  if (state == 2) {      if (page == 4) {   li[page].style.display = "none"   console.log(page + 1)   li[page + 1].style.display = "block"   page++      } else if (page = 4) {   alert("后面没有啦,不要再拉我了☹")      }      // 循环  } else if (state == 1) {      li[page].style.display = "none"      if (page == 4) {   page = page - 5   console.log(page)   // description[0].innerHTML = "" + page + "/5 "   // console.log(description[0].innerHTML)   li[page + 1].style.display = "block"   page++      } else {   num = page + 2   // description[0].innerHTML = "" + num + "/5 "   li[page + 1].style.display = "block"   page++      }  }     } </script></body></html>

    教学代码:

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>  *{     margin:0;     padding:0; } ul{     list-style:none; } #wrap{     position: relative;     width: 529px;     height: 300px;     /* border:2px solid #000; */     margin:100px auto 0;     user-select: none; } ul li.active{     display:block; } ul li{     display: none;     position: absolute;     width: 529px;     height: 300px; } .btn{     position: absolute;     width:25px;     height: 50px;     background-color: rgba(0,0,0,0.5);     color:#fff;     font-size:20px;     text-align:center;     line-height:50px;     cursor: pointer;     top:calc( 50% - 25px ); } .right{     right:0; } .checkBtn{     position:absolute;     top:-30px;     /* width:75px; */     height:30px; } .checkBtn span{     float:left;     width: 75px;     height:30px;     background-color: #ccc;     font-size:14px;     color:#fff;     text-align:center;     line-height:30px;     cursor:pointer; } .checkBtn span.on{     background-color:#90f; } p.description{     position:absolute;     width:100%;     height:30px;     background-color: rgba(0,0,0,0.3);     text-align:center;     line-height: 30px;     font-weight:bold;     color:#fff; } p.top{     top:0; } p.bottom{     bottom:0; }     </style></head><body> <div id="wrap"> <div class="checkBtn">     <span class='on'> 循环切换 </span>     <span> 单边切换 </span> </div> <ul>     <li class='active'><img src="images/1.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/2.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/3.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/4.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/5.jpg" alt="" width='100%' height='100%'></li> </ul>  <div class="btn left"> < </div> <div class="btn right"> > </div> <p class="description top"> <span class='text'>1</span>/5 </p> <p class="description bottom"> A </p>    </div>    <script> var btn = document.querySelectorAll('.checkBtn span'),     leftBtn = document.querySelector('.left'),     rightBtn = document.querySelector('.right'),     oli = document.querySelectorAll('ul li'),     txt = document.getElementsByClassName('text')[0],     bot = document.querySelector('.bottom'),     index = 0, // 标记当前是第一个     arr = ["A", "B", "C", "D", "E"],     mark = true; btn[0].onclick = function(){     this.className = 'on'     btn[1].className = ''     mark = true } btn[1].onclick = function(){     this.className = 'on'     btn[0].className = ''     mark = false } //右边的点击事件 rightBtn.onclick = function(){     console.log( mark )     // alert( 1 )     if( mark ){  //循环切换  oli[index].className = ''  //做一个累加 ++  5   index++  //判断是否到达临界值,回到最初始的值0  if( index > 4 ){      index = 0;  }  console.log( index )  oli[index].className = 'active'  txt.innerHTML = index + 1;  //  // console.log( oli[5] )  bot.innerHTML = arr[index]  // 0 1 2 3 4      }else{  //单加切换  oli[index].className = ''  index++  if( index > 4 ){      index = 4;      alert( "你继续点,能换算我输!" )  }  oli[index].className = 'active'  txt.innerHTML = index + 1;  //  // console.log( oli[5] )  bot.innerHTML = arr[index]  // 0 1 2 3 4      } } //左边的点击; leftBtn.onclick = function(){   // alert( 1 )     if(mark){  oli[index].className = ''  //做一个累加 ++  5   index--  //判断是否到达临界值,回到最初始的值0  if( index < 0 ){      index = 4;  }  console.log( index )  oli[index].className = 'active'  txt.innerHTML = index + 1;  //  // console.log( oli[5] )  bot.innerHTML = arr[index]  // 0 1 2 3 4      }else{  oli[index].className = ''  //做一个累加 ++  5   index--  //判断是否到达临界值,回到最初始的值0  if( index < 0 ){      index = 0;      alert( "你继续点,能换算我输!" )  }  console.log( index )  oli[index].className = 'active'  txt.innerHTML = index + 1;  //  // console.log( oli[5] )  bot.innerHTML = arr[index]  // 0 1 2 3 4      } }    </script></body></html>

    教学代码优化:

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>  *{     margin:0;     padding:0; } ul{     list-style:none; } #wrap{     position: relative;     width: 529px;     height: 300px;     /* border:2px solid #000; */     margin:100px auto 0;     user-select: none; } ul li.active{     display:block; } ul li{     display: none;     position: absolute;     width: 529px;     height: 300px; } .btn{     position: absolute;     width:25px;     height: 50px;     background-color: rgba(0,0,0,0.5);     color:#fff;     font-size:20px;     text-align:center;     line-height:50px;     cursor: pointer;     top:calc( 50% - 25px ); } .right{     right:0; } .checkBtn{     position:absolute;     top:-30px;     /* width:75px; */     height:30px; } .checkBtn span{     float:left;     width: 75px;     height:30px;     background-color: #ccc;     font-size:14px;     color:#fff;     text-align:center;     line-height:30px;     cursor:pointer; } .checkBtn span.on{     background-color:#90f; } p.description{     position:absolute;     width:100%;     height:30px;     background-color: rgba(0,0,0,0.3);     text-align:center;     line-height: 30px;     font-weight:bold;     color:#fff; } p.top{     top:0; } p.bottom{     bottom:0; }     </style></head><body> <div id="wrap"> <div class="checkBtn">     <span class='on'> 循环切换 </span>     <span> 单边切换 </span> </div> <ul>     <li class='active'><img src="images/1.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/2.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/3.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/4.jpg" alt="" width='100%' height='100%'></li>     <li><img src="images/5.jpg" alt="" width='100%' height='100%'></li> </ul>  <div class="btn left"> < </div> <div class="btn right"> > </div> <p class="description top"> <span class='text'>1</span>/5 </p> <p class="description bottom"> A </p>    </div>    <script> var btn = document.querySelectorAll('.checkBtn span'),     leftBtn = document.querySelector('.left'),     rightBtn = document.querySelector('.right'),     oli = document.querySelectorAll('ul li'),     txt = document.getElementsByClassName('text')[0],     bot = document.querySelector('.bottom'),     index = 0, // 标记当前是第一个     arr = ["A", "B", "C", "D", "E"],     mark = true; btn[0].onclick = function(){     this.className = 'on'     btn[1].className = ''     mark = true } btn[1].onclick = function(){     this.className = 'on'     btn[0].className = ''     mark = false } //右边的点击事件 rightBtn.onclick = function(){     oli[index].className = ''     index++     if( mark ){  if( index > 4 )index=0     }else{  //单加切换  if( index > 4 ){      index = 4;      alert( "你继续点,能换算我输!" )  }     }     fn() } //左边的点击; leftBtn.onclick = function(){   oli[index].className = ''     index--     if(mark){  if( index < 0 )index = 4     }else{  if( index < 0 ){      index = 0;      alert( "你继续点,能换算我输!" )  }     }     fn() } function fn(){     oli[index].className = 'active'     txt.innerHTML = index + 1;  //     // console.log( oli[5] )     bot.innerHTML = arr[index]  // 0 1 2 3 4  }    </script></body></html>

    三、break停止循环

    break语句用户跳出循环。
    break语句跳出循环后,会继续执行该循环之后的代码(如果有的 话):
    循环要执行50次,如果当i = 25的时候,停止循环,后面25开始就不要执行了。

     for (var i = 0; i < 50; i++) {     // 在if判断为全等的情况下,可以打断     if (i == 25) {  // 停止循环  break;     }     console.log(i) }

    输出:
    在这里插入图片描述

    四、continue跳出

    continue用户跳过循环中的一个迭代
    continue语句中段循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

     for (var i = 0; i < 50; i++) {     if (i == 25) {  // 结束当前这一次循环,而不是所有都没了。  continue;     }     console.log(i) }

    可以看出,当运行到i==25时,跳出当前循环了,所以并没有输出25。
    输出:
    在这里插入图片描述

    五、while

    只要指定条件为true,循环就可以转移至执行代码块。while循环会在制定换换条件为真时执行代码块。

        <button>1</button>    <button>2</button>    <button>3</button>    <button>4</button>    <button>5</button>    <script> var btns = document.getElementsByTagName('button'); var i = 0; // 决定当前是否循环 while (i < 5) {     btns[i].i = i;     btns[i].onclick = function () {  alert(this.i)     }     i++; }    </script>

    输出:
    (点击3,输出3的下标)
    在这里插入图片描述

    六、do while

    循环至少执行一次,即便条件为false,因为代码块是在条件语句判断前执行的

        <button>1</button>    <button>2</button>    <button>3</button>    <button>4</button>    <button>5</button>    <script> var btns = document.getElementsByTagName('button'); // 定义 var i = 0; do {     // 内容     btns[i].i = i     btns[i].onclick = function () {  alert(this.i)     }     i++; } while (i < 5)    </script>

    输出:
    在这里插入图片描述

    七、死循环

    死循环:一直无限地执行下去,永远不会停止(除非关闭浏览器)

     for (var i = 0; true; i++) {     i++ }