JavaScript 条件语句 - if else - switch
JavaScript 条件语句 - if else - switch
Devops海洋的渔夫
发布于 2019-05-30 22:05:32
发布于 2019-05-30 22:05:32
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
运算符
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 -= num2
oSpan.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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.03.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录