从零开始学前端:上节课案例+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"> <!-- 这里就是我的内容
这里就是我的内容
--> </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"> <!-- 这里就是我的内容
这里就是我的内容
--></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 += '这里就是我的内容
' // list.innerHTML += ''+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++ }