分支语句
二路分支
if(条件){
成立时的代码
}
else{
条件不成立时的代码
}
多路分支
if(条件1){条件成立时代码}
else if(条件2){条件2成立时的代码}
else if(条件3){条件3成立时的代码}
else{其它情况时的代码}
对比一下python中的多路分支
name = 'zs'
if name == None:
pass
elif name == "zs":
pass
else:
pass
开关练习
点开按钮，控制div盒子的显示与隐藏
switch语句
switch（条件）{
case m:
条件值为m时执行的代码;
break;
case n:
条件值为n时执行的代码;
break;
default:
条件都不成立时的默认执行代码;
}
变色练习
有一个输入框和提交框
输入1-3的数据
提交
不同数值会对应上不同的背景颜色
开关练习，代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// 获取按钮对象
var oBtn = document.getElementById("btn")
// 按钮对象的点击事件
oBtn.onclick = hide_show
}
function hide_show() {
// alert('..')
// 点击事件的详情
// 获取DIV标签的style对象
var oDiv1 = document.getElementById("div1")
var oDivStyle = oDiv1.style
alert(oDivStyle.display)
// 拿style对象的display属性值
// alert(oDivStyle.display)
if(oDivStyle.display == "block" || oDivStyle.display ==""){
oDivStyle.display = "none"
// 样式对象.属性=值
}else{
oDivStyle.display = "block"
}
// 如果display的值是block，那么让它变为none
// 否则让它变为block
}
</script>
<style>
div{
width: 300px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="开/关" id="btn">
<div id="div1"></div>
</body>
</html>
背景变色，代码
<script>
window.onload = function () {
var oBtn = document.getElementById("btn")
oBtn.onclick = function () {
var oTxt = document.getElementById("txt")
var sValue = oTxt.value
var oBd = document.getElementById("bd")
switch (sValue) {
case "1":
oBd.style.backgroundColor = "red";
break;
case "2":
oBd.style.backgroundColor = "blue";
break;
case "3":
oBd.style.backgroundColor = "green";
break;
default:
oBd.style.backgroundColor = "yellow";
break;
}
}
}
</script>
<input type="text" id="txt">
<input type="button" value="submit" id="btn">
<body id="bd">
<div>0</div>
</body>
