JavaScript if...else
示例
如果小時小於20，則輸出“Good day”
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
自己動手試一試 »
輸出“Good day”或“Good evening”
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
自己動手試一試 »
更多示例見下文。
描述
if/else 語句在指定條件為 true 時執行一段程式碼。如果條件為 false，則可以執行另一段程式碼。
if/else 語句是 JavaScript“條件”語句的一部分，用於根據不同條件執行不同操作。
在 JavaScript 中，我們有以下條件語句
- 使用 if 來指定一個程式碼塊，如果指定條件為 true 則執行該程式碼塊
- 使用 else 來指定一個程式碼塊，如果相同條件為 false 則執行該程式碼塊
- 使用 else if 來指定一個新的條件進行測試，如果第一個條件為 false
- 使用 switch 來選擇要執行的多個程式碼塊中的一個
語法
if 語句指定一個程式碼塊，如果條件為 true 則執行該程式碼塊
if (condition) {
// 如果條件為 true 則執行的程式碼塊
}
else 語句指定一個程式碼塊，如果條件為 false 則執行該程式碼塊
if (condition) {
// 如果條件為 true 則執行的程式碼塊
} else {
// 如果條件為 false 則執行的程式碼塊
}
else if 語句指定一個新的條件，如果第一個條件為 false
if (condition1) {
// 如果 condition1 為 true 則執行的程式碼塊
} else if (condition2) {
// 如果 condition1 為 false 且 condition2 為 true 則執行的程式碼塊
} else {
// 如果 condition1 為 false 且 condition2 為 false 則執行的程式碼塊
}
引數值
| 引數 | 描述 |
|---|---|
| condition | 必填。一個評估為 true 或 false 的表示式 |
更多示例
如果時間小於 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";
}
自己動手試一試 »
如果文件中第一個 <div> 元素的 id 為 "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 = "真棒！做得好！";
// 如果字母是 "b" 或 "d"
} else if (letter === "b" || letter === "d") {
text = "接近了，但還不夠接近。";
// 如果字母是其他任何東西
} else {
text = "差遠了..";
}
自己動手試一試 »
驗證輸入資料
var x, text;
// 獲取 id="numb" 的輸入欄位的值
x = document.getElementById("numb").value;
// 如果 x 不是數字，或小於 1，或大於 10，則輸出 "輸入無效"
// 如果 x 是 1 到 10 之間的數字，則輸出 "輸入正常"
if (isNaN(x) || x < 1 || x > 10) {
text = "輸入無效";
} else {
text = "輸入正常";
}
自己動手試一試 »
相關頁面
JavaScript 教程：JavaScript If...Else 語句
JavaScript 教程：JavaScript Switch 語句
瀏覽器支援
if...else 是 ECMAScript1 (ES1) 特性。
ES1 (JavaScript 1997) 在所有瀏覽器中都得到完全支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
