本文主要是介绍JavaScript 条件语句 - if else - switch,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
仅供学习,转载请注明出处
条件语句
通过条件来控制程序的走向,就需要用到条件语句。
运算符
1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=
3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
使用 -=
写一个减法功能,同时需要判断输入每个文本框的数值大小。
<!DOCTYPE html>
<html>
<head><title></title><script type="text/javascript">window.onload = function(){var oInput1 = document.getElementById('num1');var oInput2 = document.getElementById('num2');var oBtn1 = document.getElementById('sub');var oSpan = document.getElementById('result');oBtn1.onclick = function(){console.log(oInput1.value);console.log(oInput2.value);var num1 = parseInt(oInput1.value);var num2 = parseInt(oInput2.value);if (num1 >= num2) {num1 -= num2oSpan.innerHTML = num1;}else{oSpan.innerHTML = "输入的num1小于num2,无法计算";}}}</script>
</head>
<body><input type="text" name="" id="num1"><input type="text" name="" id="num2"><input type="button" name="" value="-=" id="sub"><div>结果:<span id="result"></span></div>
</body>
</html>
理解练习
制作单个按钮点击切换元素的显示和隐藏效果。
实现方式:主要通过判断元素的display
的值,如果是block
则是块元素,当时就是显示。如果是none
,则元素会隐藏。
那么下面使用if else
来实现一下。
可以看到,当点击切换按钮的时候,div的样式设置为display:none
的时候就隐藏了。
<!DOCTYPE html>
<html>
<head><title></title><script type="text/javascript">window.onload = function(){var oBtn = document.getElementById("btn1");var oDiv = document.getElementById("div1");oBtn.onclick = function(){if (oDiv.style.display == "none") {oDiv.style.display = "block";}else{oDiv.style.display = "none";}}}</script><style type="text/css">div{width: 100px;height: 100px;background: gold;transform: rotateZ(0deg);transition: all 1s ease ;}div:hover{transform: rotateZ(45deg) perspective(800px);}</style>
</head>
<body><input type="button" name="" value="切换" id="btn1"><div id="div1"></div>
</body>
</html>
多重if else语句
var iNow = 1;
if(iNow==1)
{... ;
}
else if(iNow==2)
{... ;
}
else
{... ;
}
switch语句
多重if else语句可以换成性能更高的switch语句
var iNow = 1;switch (iNow){case 1:...;break;case 2:...;break; default:...;
}
理解练习
编写一个通过switch方法变换body颜色的示例,如下:
<!DOCTYPE html>
<html>
<head><title></title><script type="text/javascript">window.onload = function(){var oBody = document.getElementsByTagName('body')[0];var flag = 2;switch(flag){case 1:oBody.style.background = "gold";break;case 2:oBody.style.background = "cyan";break;default:oBody.style.background = "pink";}}</script>
</head>
<body>
</body>
</html>
这篇关于JavaScript 条件语句 - if else - switch的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!