JavaScript if/else 语句

定义和用法

if/else 语句在指定条件为真时执行代码块。如果条件为假，则可以执行另一代码块。

if/else 语句是 JavaScript 的“条件”语句的一部分，用于根据不同的条件执行不同的操作。

在 JavaScript 中，我们有以下条件语句：

  • 使用 if 指定要执行的代码块，如果指定条件为真
  • 使用 else 指定要执行的代码块，如果相同条件为假
  • 如果第一个条件为假，则使用 else if 指定要测试的新条件
  • 使用 switch 选择要执行的多个代码块之一

实例

如果当前时间 (HOUR) 小于 20:00，则在 id="demo" 的元素中输出 "Good day"：

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

亲自试一试

页面下方有更多 TIY 实例。

语法

if 语句指定在条件为真时要执行的代码块：

if (condition) {
  // block of code to be executed if the condition is true
}

else จะกำหนดบล็อครหัสที่ต้องทำงานเมื่อเงื่อนไขเป็นข้อเท็จจริง:

if (condition) {
  // block of code to be executed if the condition is true
} else { 
  // block of code to be executed if the condition is false
}

ถ้าในเงื่อนไขแรกเป็นข้อเท็จจริง แล้ว else if จะกำหนดเงื่อนไขใหม่:

if (condition1) {
  // block of code to be executed if condition1 is true
} else if (condition2) {
  // block of code to be executed if the condition1 is false and condition2 is true
} else {
  // block of code to be executed if the condition1 is false and condition2 is false
}

ค่าตัวแปร

ตัวแปร รายละเอียด
condition จำเป็นต้องมี。อุปสรรค์ที่คำนวณได้เป็น true หรือ false

รายละเอียดเทคนิค

สัญญาณ JavaScript: ECMAScript 1

ตัวอย่างเพิ่มเติม

实例

ถ้าเวลาต่ำกว่า 20:00 สร้างข้อความ "Good day" สวัสดี หรือถ้าไม่เช่นนั้น สร้างข้อความ "Good evening":

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

亲自试一试

实例

ถ้าเวลาต่ำกว่า 10:00 สร้างข้อความ "Good morning" สวัสดี หากไม่ใช่แต่เวลาต่ำกว่า 20:00 สร้างข้อความ "Good day" สวัสดี หรือถ้าไม่เช่นนั้น สร้างข้อความ "Good evening":

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

亲自试一试

实例

ถ้า id ของ element <div> แรกในเอกสารเป็น "myDIV" แล้ว แก้ไขขนาดตัวอักษรของมัน:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") { 
  x.style.fontSize = "30px";
}

亲自试一试

实例

当用户单击图像，更改 <img> 元素的源属性 (src) 的值：

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

亲自试一试

实例

根据用户输入显示消息：

var letter = document.getElementById("myInput").value;
var text;
// 如果字母为 "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// 如果字母为 "b" 或 "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// 如果是其他字母
} else {
  text = "Waaay off..";
}

亲自试一试

实例

验证输入数据：

var x, text;
// 获取 id="numb" 的输入字段的值
x = document.getElementById("numb").value;
// 如果 x 不是数字或小于 1 或大于 10，则输出 "input is not valid"
// 如果 x 是 1 到 10 之间的数字，则输出 "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

亲自试一试

浏览器支持

语句 Chrome IE Firefox Safari Opera
if/else สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

เพจที่เกี่ยวข้อง

คู่มือ JavaScript：คำสั่ง If...Else ของ JavaScript

คู่มือ JavaScript：JavaScript คำสั่ง Switch