if() else() 运用的详细解说 附(案例)

javascript中的if判断

javascript中的if判断是最常用的行为了,下面详细解说一下用法原理:

if(这里是条件){
    如果条件为真,执行这里;(条件为真才执行) 
}else{ 
    否则,执行这里。(只要不是真,就执行。)
}
if(条件1){
    如果条件1为真,执行这里;(条件为真才执行)
}else if(条件2){
    否则,当条件2为真执行这里。(当条件1不为真,条件2为真执行这里)
}else{
    条件1,条件2都不为真,执行这里
}

如果还是有点不明白,更深层面的继续往下看!

if(今天是星期三){
    今天要上班
}else{
    今天不用上班
} 
//上面的情况,只有星期三要上班。
//其他的星期一,二,四,五,六,日。都不用上班。  

if(今天是星期六) {
    今天不用上班 
} else if (今天是星期天) {
    今天不用上班
} else{
    都用上班 
}
//第一个,先判断,是不是星期六,如果是,就不用上班;
//如果今天不是星期六,继续用else if判断今天是不是星期天;
//如果是,也不用上班。 
//如果今天不是星期六,也不是星期天,那么,就会执行最后一个ELSE, 都要上班。

实例:颜色切换

if判断,单击盒子,使盒子的背景颜色发生变化!

var x = document.getElementById("div1");
var y = 0;
x.onclick = run;
function run(){
    if(y==0){    
        this.style.backgroundColor="pink";
        y=1;
    }else if(y==1){
        this.style.backgroundColor="yellow";
        y=2;
    }else if(y==2){
        this.style.backgroundColor="blue";
        y=3;
    }else if(y==3){
        this.style.backgroundColor="green"    
    }else{
        this.style.backgroundColor="red"        
    }
}

实例:数组颜色切换

效果同上!只是把颜色存在数组中

var oBtn=document.getElementById("btn");
var arr=["green","yellow","pink","blue","greenyellow"];		
var i=0;			
oBtn.onclick=function(){				
    i++;  //i自增1;				
    if(i>=arr.length){  //判断i是否大于等于数组的长度					
    i=0;  //条件满足把i重新赋值0;				}				
    console.log(arr[i]);				
    this.style.backgroundColor=arr[i];			
}


原文链接:HelloWeb前端网 » if() else() 运用的详细解说 附(案例) » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享