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 语句在指定条件为真时执行一段代码。如果条件为假，可以执行另一段代码。
if/else 语句是 JavaScript "条件" 语句的一部分，用于根据不同的条件执行不同的操作。
在 JavaScript 中，我们有以下条件语句
- 使用 if 指定一段代码，如果指定条件为真则执行
- 使用 else 指定一段代码，如果相同条件为假则执行
- 使用 else if 指定一个新的条件进行测试，如果第一个条件为假
- 使用 switch 选择要执行的多个代码块中的一个
语法
if 语句指定一段代码，如果条件为真则执行
if (condition) {
// 如果条件为真，则执行代码块
}
else 语句指定一段代码，如果条件为假则执行
if (condition) {
// 如果条件为真，则执行代码块
} else {
// 如果条件为假，则执行代码块
}
else if 语句在第一个条件为假时指定一个新的条件
if (condition1) {
// 如果 condition1 为真，则执行代码块
} else if (condition2) {
// 如果 condition1 为假，condition2 为真，则执行代码块
} else {
// 如果 condition1 为假，condition2 为假，则执行代码块
}
参数值
| 参数 | 描述 |
|---|---|
| condition | 必需。一个计算结果为真或假的表达式 |
更多示例
如果时间小于 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 = "Spot on! Good job!";
// 如果字母是 "b" 或 "d"
} else if (letter === "b" || letter === "d") {
text = "Close, but not close enough.";
// 如果字母是其他任何东西
} 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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
