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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
