JS-4.判断-CSDN博客

本文链接：https://blog.csdn.net/qq_34737697/article/details/79213993

  结构 

  if(条件){ 

  执行语句; 

  }else{ 

  执行语句; 

}

  举例说明 

  需求：一个按钮点击控制div的显示隐藏 

  <html> 

  <head> 

  <meta charset="utf-8"> 

  <title>标题</title> 

  <style> 

  #div1{ 

      width:100px; 

      height:100px; 

      background:gray; 

      display:none; 

}

  </style> 

  </head> 

  <body> 

  <script> 

      function showHide(){ 

          var a1=document.getElementById('div1'); 

          if(a1.style.display=='none'){ 

              a1.style.display='block'; 

          }else{ 

              a1.style.display='none'; 

}

}

  </script> 

  <button οnclick="showHide();">显示隐藏</button> 

  <div id="div1"></div> 

  </body> 

  </html> 

  当用一个按钮来控制时，最简单的办法就是使用判断，当div显示的时候，再点击按钮，就会隐藏。当div隐藏的时候，再点击按钮，就会显示。 

  判断体还有switch语句 

  switch (level) { 

  case 'one': 

  执行语句; 

  break; 

  case 'two': 

  执行语句; 

  break; 

  case 'three': 

  执行语句; 

  break; 

  case 'four': 

  执行语句; 

  break; 

  default: 

  执行语句; 

  break; 

}

  举例： 

  需求：输入月份判断季节并输出 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>Title</title> 

  <style> 

  #out1{ 

  width: 200px; 

  height: 30px; 

  color:gray; 

}

  </style> 

  <script> 

  window.οnlοad=function () { 

  var btn=document.getElementById('btn'); 

  btn.οnclick=function () { 

  var a1 = document.getElementById("in1").value; 

  var msg; 

  switch (a1) { 

  case '12': 

  case '1': 

  case '2': 

  msg = '冬季'; 

  break; 

  case '3': 

  case '4': 

  case '5': 

  msg = '春季'; 

  break; 

  case '6': 

  case '7': 

  case '8': 

  msg = '夏季'; 

  break; 

  case '9': 

  case '10': 

  case '11': 

  msg = '秋季'; 

  break; 

  default: 

  msg = '请输入1-12之间的月份'; 

  break; 

}

  var out1 = document.getElementById('out1'); 

  out1.textContent = msg; 

}

}

  </script> 

  </head> 

  <body> 

  请输入月份<input type="text"id="in1"> 

  <button id="btn">确定</button> 

  <div>当前的季节为 <span id="out1"></span></div> 

  </body> 

  </html> 

  效果： 

  解释：先用HTML做结构，然后用在JS中做判断，判断使用switch语句，使用document.getElementById("in1").value;获取到输入的值在switch中使用，然后判断输出季节 