从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（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="data:images/01.jpg" class='active' alt=""><img src="data:images/02.jpg" alt=""><div class="content"><input type="text" /><button class="btn">发表</button></div></div><button class="add"> + </button></div><ul class="list"><!-- <li><img src="data:images/01.jpg" alt=""><p>这里就是我的内容</p></li><li><img src="data:images/01.jpg" alt=""><p>这里就是我的内容</p></li> --></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 += '<li><img src="' + imgChange[0].src + '" alt=""><p>' + inp.value + '</p></li>'} else if (people == 2) {list.innerHTML += '<li><img src="' + imgChange[1].src + '" alt=""><p>' + inp.value + '</p></li>'}}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="data:images/01.jpg" class='active' alt=""><img src="data:images/02.jpg" alt=""><div class="content"><input type="text" /><button class="btn">发表</button></div></div><button class="add"> + </button></div><ul class="list"><!-- <li><img src="data:images/01.jpg" alt=""><p>这里就是我的内容</p></li><li><img src="data:images/01.jpg" alt=""><p>这里就是我的内容</p></li> --></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].srcconsole.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 += '<li><img src="data:images/01.jpg" alt=""><p>这里就是我的内容</p></li>'// list.innerHTML += '<li><img src="data:images/01.jpg" alt=""><p>'+str+'</p></li>'list.innerHTML += '<li><img src="'+picSrc+'" alt=""><p>'+str+'</p></li>'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="data:images/1.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/2.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/3.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/4.jpg" alt="" width='100%' height='100%'></li><li><img src="data: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 + 5description[0].innerHTML = "<span class='text'>" + page + "</span>/5 "console.log(description[1].innerHTML)description[1].innerHTML = name[page]li[page - 1].style.display = "block"page--} else {description[0].innerHTML = "<span class='text'>" + page + "</span>/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 - 5console.log(page)// description[0].innerHTML = "<span class='text'>" + page + "</span>/5 "// console.log(description[0].innerHTML)li[page + 1].style.display = "block"page++} else {num = page + 2// description[0].innerHTML = "<span class='text'>" + num + "</span>/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="data:images/1.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/2.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/3.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/4.jpg" alt="" width='100%' height='100%'></li><li><img src="data: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++//判断是否到达临界值,回到最初始的值0if( 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--//判断是否到达临界值,回到最初始的值0if( 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--//判断是否到达临界值,回到最初始的值0if( 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="data:images/1.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/2.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/3.jpg" alt="" width='100%' height='100%'></li><li><img src="data:images/4.jpg" alt="" width='100%' height='100%'></li><li><img src="data: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 = ibtns[i].onclick = function () {alert(this.i)}i++;} while (i < 5)</script>

输出：

七、死循环

死循环：一直无限地执行下去，永远不会停止（除非关闭浏览器）

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

预习：从零开始学前端：数据类型转换、运算符 — 今天你学习了吗？（JS：Day6）

从零开始学前端：上节课案例+break，continue以及while和do while --- 今天你学习了吗？（JS：Day5）相关推荐

从零开始学前端：if判断，for循环,，switch判断 --- 今天你学习了吗？（JS：Day4）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:中括号代替点操作,获取对象,自定义标签属性 - 今天你学习了吗?(JS:Day3) 文章目录从零开始学前端 ...
从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:九九乘法表.全选反选全不选 - 今天你学习了吗?(JS:Day7) 文章目录从零开始学前端:程序猿小白也可 ...
从零开始学前端：对象序列化与反序列化、冒泡排序、数组去重 --- 今天你学习了吗？（JS：Day11）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:字符串和数组的方法 - 今天你学习了吗?(JS:Day10) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：购物车和鲜花价格排序 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：字符串和数组的方法 --- 今天你学习了吗？（JS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:作用域.执行顺序 - 今天你学习了吗?(JS:Day9) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：作用域、执行顺序 --- 今天你学习了吗？（JS：Day9）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:函数 - 今天你学习了吗?(JS:Day8) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今天你学 ...
从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 --- 今天你学习了吗？（JS：Day3）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识函数,合法属性与自定义属性 - 今天你学习了吗?(JS:Day2) 文章目录从零开始学前端:程序猿小白 ...
从零开始学前端：初识函数，合法属性与自定义属性 --- 今天你学习了吗？（JS：Day2）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识JavaScript - 今天你学习了吗?(JS:Day1) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：初识JavaScript --- 今天你学习了吗？（JS：Day01）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:jQuery官网 - 今天你学习了吗?(CSS:Day26) 文章目录从零开始学前端:程序猿小白也可以完全 ...

从零开始学前端：上节课案例+break，continue以及while和do while --- 今天你学习了吗？（JS：Day5）