非常教程

JavaScript 参考手册教程

JavaScript if/else 语句

JavaScript if/else 语句

JavaScript if/else 语句

JavaScript if/else 语句

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


JavaScript if/else 语句

更多实例

实例

如果时间小于 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 if/else 语句

JavaScript 语句参考手册
JavaScript if/else 语句
JavaScript 参考手册

JavaScript 参考手册提供了完整的 JavaScript 对象、浏览器对象、HTML DOM 对象手册。手册包含了每个对象、属性、方法的实例。

JavaScript 参考手册目录

1.Navigator 对象
2.HTML DOM Document 对象
3.JavaScript Array 属性构造器
4.JavaScript length 属性
5.JavaScript constructor 属性
6.JavaScript unshift() 方法
7.JavaScript valueOf() 方法
8.JavaScript sort() 方法
9.JavaScript splice() 方法
10.JavaScript toString() 方法
11.JavaScript Array indexOf() 方法
12.JavaScript join() 方法
13.JavaScript Array lastIndexOf() 方法
14.JavaScript pop() 方法
15.JavaScript push() 方法
16.JavaScript reverse() 方法
17.JavaScript shift() 方法
18.JavaScript slice() 方法
19.JavaScript Array 对象
20.JavaScript concat() 方法
21.JavaScript Boolean prototype 构造器
22.JavaScript Boolean constructor 属性
23.JavaScript getMilliseconds() 方法
24.JavaScript getHours() 方法
25.JavaScript getFullYear() 方法
26.JavaScript getDay() 方法
27.JavaScript getDate() 方法
28.JavaScript Date prototype 属性
29.JavaScript constructor 属性
30.JavaScript Boolean 对象
31.JavaScript valueOf() 方法
32.JavaScript toString() 方法
33.JavaScript UTC() 方法
34.JavaScript getUTCFullYear() 方法
35.JavaScript toLocaleString() 方法
36.JavaScript toString() 方法
37.JavaScript toTimeString() 方法
38.JavaScript toUTCString() 方法
39.JavaScript valueOf() 方法
40.JavaScript toISOString() 方法
41.JavaScript toJSON() 方法
42.JavaScript toLocaleDateString() 方法
43.JavaScript toLocaleTimeString() 方法
44.JavaScript setUTCHours() 方法
45.JavaScript setUTCMilliseconds() 方法
46.JavaScript setUTCMinutes() 方法
47.JavaScript setUTCMonth() 方法
48.JavaScript setUTCSeconds() 方法
49.JavaScript toDateString() 方法
50.JavaScript getSeconds() 方法
51.JavaScript getMonth() 方法
52.JavaScript getMinutes() 方法
53.JavaScript setMinutes() 方法
54.JavaScript setMonth() 方法
55.JavaScript setSeconds() 方法
56.JavaScript Date 对象
57.JavaScript setTime() 方法
58.JavaScript setUTCDate() 方法
59.JavaScript setUTCFullYear() 方法
60.JavaScript getUTCSeconds() 方法
61.JavaScript parse() 方法
62.JavaScript setDate() 方法
63.JavaScript setFullYear() 方法
64.JavaScript setHours() 方法
65.JavaScript setMilliseconds() 方法
66.JavaScript getUTCDay() 方法
67.JavaScript getUTCDate() 方法
68.JavaScript getTimezoneOffset() 方法
69.JavaScript getTime() 方法
70.JavaScript E 属性
71.JavaScript getUTCHours() 方法
72.JavaScript getUTCMilliseconds() 方法
73.JavaScript getUTCMinutes() 方法
74.JavaScript getUTCMonth() 方法
75.JavaScript random() 方法
76.JavaScript round() 方法
77.JavaScript sin() 方法
78.JavaScript sqrt() 方法
79.JavaScript tan() 方法
80.JavaScript atan2() 方法
81.JavaScript ceil() 方法
82.JavaScript cos() 方法
83.JavaScript exp() 方法
84.JavaScript floor() 方法
85.JavaScript log() 方法
86.JavaScript max() 方法
87.JavaScript min() 方法
88.JavaScript pow() 方法
89.JavaScript SQRT1_2 属性
90.JavaScript SQRT2 属性
91.JavaScript abs() 方法
92.JavaScript acos() 方法
93.JavaScript asin() 方法
94.JavaScript atan() 方法
95.JavaScript Math 对象
96.JavaScript LN2 属性
97.JavaScript LN10 属性
98.JavaScript LOG2E 属性
99.JavaScript LOG10E 属性
100.JavaScript PI 属性