条件语句
通过条件来控制程序的走向,就需要用到条件语句
运算符
- 算术运算符:+ 、- 、* 、/(除)、%(求余)
- 赋值运算符:= 、+= 、-= 、/= 、%=
- 条件运算符:== 、===、 > 、>= 、< 、<= 、!= 、&&(而且) 、||(或者)、!(否)
注:" == "与 " === “的区别:
1.” == “会先将两边的值转换为同一类型再进行比较。
2.” === " 会先比较俩边的值是否是同一类型,是再比较值,不是则直接是不等。
if else
// 条件判断
var iNum01 = 2;
var iNum02 = 4;
if(iNum01>iNum02){
alert("iNum01大于iNum02");
}
else{
alert("iNum01不大于iNum02")
}
多重if else
//多重条件判断
var sBox = document.getElementById("box");
var iNum03 = 6;
sBox.innerHTML = iNum03; //将6写入到id是box的盒子的内容区域
if(iNum03<2){
console.log("ok");
}
else if(iNum03>7){
console.log("iNum03大于7");
}
else{
console.log("iNum03既不小于2也不大于7");
}
switch语句
//用switch来实现多重判断
switch(iNum03){
case iNum03<2:
console.log("ok");
break;
case iNum03>7:
console.log("iNum03大于7");
break;
default: //都不是的情况下执行
console.log("iNum03既不小于2也不大于7");
break;
}
多重if else语句可以换成更高的性能的switch语句
练习
按钮切换元素显示或隐藏
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color: chocolate;
}
#btn1{
width: 200px;
height: 50px;
font-size: 22px;
}
</style>
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1");//获取按钮对象
var box = document.getElementById("box");//获取盒子对象
// var box_display = box.style.display;//无法获取。不懂原理(待解决)
//alert(box_display);//弹出undefined
btn1.onclick = function(){
if (box.style.display == 'none'){
box.style.display = 'block';
btn1.value = '隐藏'; //显示盒子
}
else{
box.style.display = 'none';//隐藏盒子
btn1.value ='显示';
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="隐藏">
<br>
<br>
<div id="box">
</div>
</body>
</html>
效果图:
没点击按钮时:
点击后:
存在问题:
var box_display = box.style.display;//无法获取。不懂原理(待解决) alert(box_display);//弹出undefined
随着星期改变背景颜色
HTML 代码:
window.onload = function(){
var btn1 = 6;
var body = document.getElementById('body');
switch(btn1){
case 0:
body.style.backgroundColor = 'lightblue';
break;
case 1:
body.style.backgroundColor = 'lightgreen';
break;
case 2:
body.style.backgroundColor = 'gold';
break;
case 3:
body.style.backgroundColor = 'pink';
break;
case 4:
body.style.backgroundColor = 'green';
break;
case 5:
body.style.backgroundColor = 'chooclate';
break;
case 6:
body.style.backgroundColor = 'red';
break;
}
}
改变btn1的值来切换颜色
简单计算器
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
<script>
window.onload = function(){
var iNum01 = document.getElementById('num1');
var iNum02 = document.getElementById('num2');
var btn1 = document.getElementById('sum')
btn1.onclick = function(){
if ((iNum01.value == '') || (iNum02.value == '')){
alert('请输入要计算的值');
}
else{
alert(parseInt(iNum01.value) + parseInt(iNum02.value));
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="num1">
+
<input type="text" name="" id="num2">
<input id='sum' type="button" value="等于">
</body>
</html>
效果图:
内容为空时点击等于:
有内容时点击等于: