公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

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];			
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)