Latest web development tutorials

JavaScript if/else 語句

JavaScript 語句參考手冊 JavaScript語句參考手冊

實例

如果當前時間(小時)小於20:00, 在id="demo" 元素上輸出"Good day" :

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

輸出結果：


嘗試一下»

本文底部包含更多實例。

定義和用法

if/else 語句在指定的條件為true 時，執行代碼塊。 如果條件為false，會執行另外一個代碼塊。

if/else 語句是JavaScript 條件語句的一部分, 條件語句用於基於不同的條件來執行不同的動作。

在JavaScript 中，我們可使用以下條件語句：

  • if語句 -只有當指定條件為true時，使用該語句來執行代碼。
  • else語句如果if語句的條件為false，則執行該代碼塊
  • else if語句 -檢測一個新的條件，如果第一個條件為false
  • switch語句 -選擇多個代碼塊中其中一個執行

瀏覽器支持

語句
if/else Yes Yes Yes Yes Yes

語法

if語句指定了在條件為true時執行的代碼塊：

if (condition) {
如果condition為true執行該代碼塊
}

else語句指定在條件為false時執行的代碼塊：

if (condition) {
如果condition為true執行該代碼塊
} else {
如果condition為false執行該代碼塊
}

else if語句在第一個條件為false時指定了新的條件:

if (condition1) {
如果condition1為true執行該代碼塊
} else if (condition2) {
如果condition1為false且condition2為true執行該代碼塊
} else {
如果condition1為false且condition2為false執行該代碼塊
}

參數值

參數 描述
condition 必須。 表達式，用於條件判斷： true 或false

技術細節

JavaScript 版本： 1.0

實例

更多實例

實例

如果時間小於20:00, 生成一個"Good day" 問候，否則輸出"Good evening":

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

問候語的輸出結果為：

var d=new Date(); var time=d.getHours(); if (time<20) { document.write("Good day"); } else { document.write("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";
}

問候語輸出結果為:

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

嘗試一下»

實例

修改文檔中第一個id 等於"myDIV" 的<div> 元素的字體號:

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 x, text;

// 獲取id="numb" 輸入框的值

x = document.getElementById("numb").value;

// 如果x 不是換一個數字或x 小於1 或大於10 輸出"請輸入合法值"
// 如果x 的值介於 1 和10 之間，輸出"輸入正確"

if (isNaN(x) || x < 1 || x > 10) {
text = "請輸入合法值";
} else {
text = "輸入正確";
}
document.getElementById("demo").innerHTML = text;

嘗試一下»

相關頁面

JavaScript教程: JavaScript If...Else語句

JavaScript教程: JavaScript Switch語句

JavaScript 語句參考手冊 JavaScript語句參考手冊