分支语句
根据条件的不同 来执行 不同的代码
1.if分支语句
if(条件){
}else{
}
除了以上布尔值结果为 false: false null underfined NaN 数字0
剩下全部都是 true
开关思想
<div id="fbox">盒子</div>
<script>
// 有一个盒子 背景颜色是红色 初始宽高 都是100px
// 鼠标点击这个盒子 单数次 盒子变成 200px 双数次 变成 100px
// 获取盒子元素
var fbox = document.getElementById("fbox");
// 设置盒子的初识宽高、颜色
fbox.style.width='100px';
fbox.style.height='100px';
fbox.style.backgroundColor='red';
//定义开关
var flog =true;
fbox.onclick = function () {
if (flog) {
fbox.style.width='200px';
fbox.style.height='200px';
flog = false;
} else {
fbox.style.width='100px';
fbox.style.height='100px';
flog = true;
}
}
2.else if语句
if(条件1) {
// 满足条件1时 执行的代码块
} else if(条件2){
// 不满足条件1 但是满足 条件2时 执行的代码块
} else if(条件3){
// 不满足条件1,条件2 但是满足 条件3 时 执行的代码块
}
.
.
.
else{
// 所有条件都不满足时 执行的代码块
// 此行最后代码块根据情况定义,可写可不写
}
3.switch 分支语句
执行效率 比 if 高得多
常用于 对固定值的判断
语法:
switch (变量){
case 值1:
当变量 == 值1 所执行的代码块
break;
case 值2:
当变量 == 值2 所执行的代码块
break;
case 值3:
代码块
break;
......
default:
所有的case值都没有匹配上 所执行的代码块
break;
}
<input type="text" id="inp">
<button id="btn">输入日期</button>
<script>
// 练习 输入框输入1-7,弹出周一至周日,其他数字提示:“请输入合法字符”
var inp = document.getElementById("inp");
var btn = document.getElementById("btn");
btn.onclick = function () {
var day = inp.value *1;
switch (day) {
case 1:
console.log("周一");
break;
case 2:
console.log("周二");
break;
case 3:
console.log("周三");
break;
case 4:
console.log("周四");
break;
case 5:
console.log("周五");
break;
case 6:
console.log("周六");
break;
case 7:
console.log("周日");
break;
default:
console.log("请输入合法字符");
break;
}
}
</script>
4.三目运算符
(判断条件)? 代码1:代码2
条件判断 结果 如果为 true
则执行 代码1 (:号 左边的代码)
结果为 如果为 false
则执行 代码2 (:号 右边的代码)
代码1 和 代码2 都必须是一行代码 不能出现 ;号
<script>
var num = 1;
// 应用场景1 代码块的执行
(num == 1) ? console.log("真"):console.log("假");
// 应用场景2 赋值 (常用)
var res = (num == 1) ? "真":"假";
console.log(res);
// 判断是否闰年
var year = 2001;
var res1 = (year% 100 != 0 && year %4 ==0 || year % 100 ==0)?year+"是闰年":year+"平年";
console.log(res1);
</script>