流程控制语句
流程控制语句的分类
1.顺序结构
2.选择结构(分支语句) if if-else switch
3.循环结构：for for-in while do-while
4.其他：break，continue
1.分支语句
（1）if语句
语法：if(条件){
条件成立时执行的代码
}
注意：大括号可以省略，if只能控制紧跟在()后面的一行代码
var money = 100;
if(money >= 200){ //条件成立
console.log("买猪肉");
console.log("买房子");
}
(2)if-else
语法：if(条件){
条件成立时执行的代码
}else{ 条件不成立时执行的代码 }
var age = 4;
if(age < 7){
//条件成立
console.log("上幼儿园玩泥巴");
}else{
//条件不成立执行的代码
console.log("去网吧玩泥巴");
}
(3)if-else嵌套
语法：if(条件){
条件成立时执行的代码
}else if(条件){
条件成立时执行的代码
} else if.....
注意：else总是和他前面最近的那个if是一对
//90-100优秀 80-90良好 70-80一般 60-70及格 60以下不及格
var c = 89;
if(c >= 90){
console.log("优秀");
}else if(c>=80){
console.log("良好");
}else if(c>=70){
console.log("一般")
}else if(c>=60){
console.log("结果");
}else{
console.log("不及格")
}
//用if-else嵌套实现简易计算器
<input type="text" id="in1">
<select name="" id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="in2"><button id="btn">=</button>
<input type="text" id="in3">
<script>
var oIn1 = document.getElementById("in1");
var oIn2 = document.getElementById("in2");
var oIn3 = document.getElementById("in3");
var oBtn = document.getElementById("btn");
var oSel = document.getElementById("sel");
oBtn.onclick = function () {
if(oSel.value=="+"){
oIn3.value=Number(oIn1.value)+Number(oIn2.value);
}else if(oSel.value=="-"){
oIn3.value=Number(oIn1.value)-Number(oIn2.value);
}else if(oSel.value=="*"){
oIn3.value=Number(oIn1.value)*Number(oIn2.value);
}else if(oSel.value=="/"){
oIn3.value=Number(oIn1.value)/Number(oIn2.value);
}
}
</script>
(4)switch…case
switch( 匹配值 ){
case 情况1 ：匹配到情况1执行的代码;break;
case 情况2 ：匹配到情况2执行的代码;break;
case 情况3 ：匹配到情况3执行的代码;break;
....
default : 上面都不能匹配到的时候执行的代码
}
// break:防止穿透，如果不写break，匹配到对应的一项以后，后面的不会再进行匹配，直接执行
var str = "*"
switch(str){
case "+" : console.log(100+10);break;
case "-" : console.log(100-10);break;
case "*" : console.log(100*10);break;
case "/" : console.log(100/10);break;
default:console.log("能力有限，算不出来");
}
switch(parseInt(c/10)){ //90 91 92 93 94 95
case 10: //如果100，就跳过往下执行
case 9 : console.log("优秀");break;
case 8 : console.log("良好");break;
case 7 : console.log("一般");break;
case 6 : console.log("及格");break;
default:console.log("不及格");
}
注意：if-else与switch…case的关系
如果需要用到判断执行某些代码，可以使用if-else和switch,一般情况下，如果条件明确，并且是一些简单字符，数字等，会选择用switch，相反的结构、条件复杂就选用if-else
//用switch...case实现简易计算器
<input type="text" id="in1">
<select name="" id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="in2"><button id="btn">=</button>
<input type="text" id="in3">
<script>
var oIn1=document.getElementById("in1");
var oIn2=document.getElementById("in2");
var oIn3=document.getElementById("in3");
var oBtn=document.getElementById("btn");
var oSel=document.getElementById("sel");
oBtn.onclick=function(){
switch(sel.value){
case "+":oIn3.value=Number(oIn1.value)+Number(oIn2.value);break;
case "-":oIn3.value=Number(oIn1.value)-Number(oIn2.value);break;
case "*":oIn3.value=Number(oIn1.value)*Number(oIn2.value);break;
case "/":oIn3.value=Number(oIn1.value)/Number(oIn2.value);break;
}
}
</script>
(4)switch…case
2.获取DOM元素的方式
1.通过id名获取
document.getElementById("id名"); 一次获取一个
2.通过tagName获取
a.获取整个文档中的对应的标签：document.getElementsByTagName('标签名') ：是一个集合，使 用的时候必须通过[下标]获取，不区分大小写
b.获取对应父元素中的标签：父元素.getElementsByTagName('标签名')
3.通过className获取 （不建议使用，因为ie8不兼容）
获取整个文档中的对应的标签：document.getElementsByClassName('类名') ：是一个集合，使用的时候必须通过[下标]获取
获取对应父元素中的标签：父元素.getElementsByClassName('类名')
<ul>
<li id="li1">1</li>
<li>2</li>
<li class="box">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="ul">
<li>a</li>
<li class="box">b</li>
<li>c</li>
<li>d</li>
</ul>
//1.通过id名获取元素
var li1 = document.getElementById("li1");
//2.通过tagName获取标签
var oLi = document.getElementsByTagName('li');
console.log(oLi); //HTMLCollection(6) 元素集合--类似数组
//获取集合的个数
console.log(oLi.length); //6
//获取数组元素 [下标]
console.log(oLi[0]);
oLi[0].onclick = function(){
alert("被点击了");
}
//3.获取第二个ul里面的li
var oUl = document.getElementsByTagName("ul");
var oLII = oUl[1].getElementsByTagName("li");
console.log(oLII);
//4.通过className获取标签
var oBox = document.getElementsByClassName("box");
console.log(oBox);
3.循环语句
（1）for循环
for循环：让特定的代码，执行指定的次数
语法：for(表达式1;表达式2;表达式2){}
for(初始化循环变量;条件语句;更新循环变量){ 循环体 }
执行顺序：
1.初始化循环变量 i = 0;
2.判断条件语句
条件成立 到3步
条件不成立 结束循环
3.执行循环体
4.更新循环变量 i++ i=1 //i = 9
5. 回到2
for(var i=0;i<10;i++){
console.log(i);
console.log("a");
}
//1.获取标签
var oLi = document.getElementsByTagName("li");
//2.添加点击事件
for(var i = 0;i<10;i++){
oLi[i].onclick = function () {
alert("点击了");
}
}
(2)双重for循环
语法：for(表达式1;表达式2;表达式2){
for(表达式1;表达式2;表达式2){}
}
例子：<h2>喜欢的明星</h2>
<ul>
<li>吴春迪</li>
<li>李易峰</li>
<li>赵丽颖</li>
<li>张若昀</li>
<li>白敬亭</li>
</ul>
<h2>喜欢的节目</h2>
<ul>
<li>明星大侦探</li>
<li>青云志</li>
<li>三国</li>
<li>麻雀</li>
</ul>
<h2>讨厌的食物</h2>
<ul>
<li>韭菜</li>
<li>鱼</li>
<li>芹菜</li>
<li>内脏</li>
<li>肉</li>
</ul>
<script>
var oUl = document.getElementsByTagName("ul");
//双重for循环
for(var i = 0;i<2;i++){ //外循环循环父元素
var oLi = oUl[i].getElementsByTagName("li");
for(var j = 0;j<oLi.length;j++){ //内循环循环子元素
oLi[j].style.border = "1px solid red";
}
}
</script>
<table width='500' border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var oTr = document.getElementsByTagName("tr");
var arr = [
["车瑜",59,59,59],
["李钰",10,20,30],
["周大福",100,100,100],
["苗苗",59,10,99]
]
for(var i=0;i<oTr.length-1;i++){ //外循环循环父元素
var oTd = oTr[i+1].getElementsByTagName("td");
for(var j=0;j<oTd.length;j++){//内循环循环子元素
oTd[j].innerHTML=arr[i][j];//给每一个单元格都设置内容，在数组
}
}
</script>
在这里插入图片描述
4.document.write()
innerHTML和document.write()的区别?
document.write():
1.只能操作body的内容
2.重绘整个页面
3.不会覆盖通过document.write写入的数据
innerHTML：
1.操作所有闭合标签的内容
2.重绘某个标签的内容
3.覆盖所有的
fd
<button onclick='fun()'>按钮</button>
function fun(){
document.body.innerHTML = "哈哈哈哈";
document.body.innerHTML = "黑嘿";
}
function fun(){
document.write("嘿嘿嘿嘿嘿");
document.write("哈哈哈");
}
运行效果图
点击按钮之前：
区别2：
区别3
实例
1.实现图片的切换包括顺序切换和循环切换，顺序切换左按钮点到最后一张则显示最后一张，右按钮点回到第一张则显示第一张，循环切换可以循环起来
<script>
var oBtn=document.getElementsByTagName("button");
var oP=document.getElementsByTagName("p");
var oImg=document.getElementById("img");
var json =[
{
src:"img/1.jpg",
miaoshu:"美女1",
title:"1/4"
},
{
src:"img/2.jpg",
miaoshu:"美女2",
title:"2/4"
},
{
src:"img/3.jpg",
miaoshu:"美女3",
title:"3/4"
},
{
src:"img/4.jpg",
miaoshu:"美女4",
title:"4/4"
}
];
var n=0;
var flag=true;
//点击顺序按钮，标志为true
oBtn[0].onclick=function(){
flag = true;
}
//点击循环按钮，标志为false
oBtn[1].onclick = function(){
flag=false;
}
//点击下一张
oBtn[3].onclick = function(){
n++;
if(n==4){//第五张图片的时候（没有第五张）如果是顺序，则永远显示第四张，否则显示第一张
if(flag==true){
n=3;
}else{
n=0;
};
}
oImg.src=json[n].src;
oP[0].innerHTML=json[n].title;
oP[1].innerHTML=json[n].miaoshu;
}
//点击上一张
oBtn[2].onclick=function(){
n--;
if(n<0){
if(flag==true){//回到第一张图片再要往下点的时候，如果是顺序，则永远显示第一张，否则显示第四张
n=0;
}else{
n=3;
};
}
oImg.src=json[n].src;
oP[0].innerHTML=json[n].title;
oP[1].innerHTML=json[n].miaoshu;
}
}
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
