JavaScript if/else 语句

最后更新于：2022-03-27 00:44:09

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

实例

更多实例

实例

如果时间小于 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 语句参考手册