js 中的条件语句

╰半夏微凉° 2023-02-23 12:11 13阅读 0赞

## if …else语句 ##

var name = '';
    if(name === 'zhangsan'){ 
    	alert('这是张三');
    }else{ 
    	console.log('这不是张三')
    }

## if …elseif…else语句 ##

<label for="weather">Select the weather type today: </label>
    <select id="weather">
      <option value="">--Make a choice--</option>
      <option value="sunny">Sunny</option>
      <option value="rainy">Rainy</option>
      <option value="snowing">Snowing</option>
      <option value="overcast">Overcast</option>
    </select>
    
    <p></p>
    
    var select = document.querySelector('select');
    var para = document.querySelector('p');
    
    select.addEventListener('change', setWeather);
    
    function setWeather() { 
      var choice = select.value;
    
      if (choice === 'sunny') { 
        para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
      } else if (choice === 'rainy') { 
        para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
      } else if (choice === 'snowing') { 
        para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
      } else if (choice === 'overcast') { 
        para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
      } else { 
        para.textContent = '';
      }
    }

## switch语句 ##

<label for="weather">Select the weather type today: </label>
    <select id="weather">
      <option value="">--Make a choice--</option>
      <option value="sunny">Sunny</option>
      <option value="rainy">Rainy</option>
      <option value="snowing">Snowing</option>
      <option value="overcast">Overcast</option>
    </select>
    
    <p></p>
    
    var select = document.querySelector('select');
    var para = document.querySelector('p');
    
    select.addEventListener('change', setWeather);
    
    
    function setWeather() { 
      var choice = select.value;
    
      switch (choice) { 
        case 'sunny':
          para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
          break;
        case 'rainy':
          para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
          break;
        case 'snowing':
          para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
          break;
        case 'overcast':
          para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
          break;
        default:
          para.textContent = '';
      }
    }

## 三元运算符 ##

var greeting = (isBirthday)?'Happy birthday Mrs.Xiao': 'Today isnot my birthday';
    
    --------------------------
    <label for="theme">Select theme: </label>
    <select id="theme">
      <option value="white">White</option>
      <option value="black">Black</option>
    </select>
    
    <h1>This is my website</h1>
    
    var select = document.querySelector('select');
    var html = document.querySelector('html');
    document.body.style.padding = '10px';
    
    function update(bgColor, textColor) { 
      html.style.backgroundColor = bgColor;
      html.style.color = textColor;
    }
    
    select.onchange = function() { 
      ( select.value === 'black' ) ? update('black','white') : update('white','black');
    }

## js逻辑运行符 ##

||   //或 ：表示或者，满足一个条件就可以执行。
    &&   //与 ：表示并且，所有条件全部满足的时候执行。
    !    //非 : 表示非 ，对一个逻辑取相反的效果执行。