JavaScript if/else 语句

返回上一级

if/else 语句在指定的条件为 true 时,执行代码块。如果条件为 false,会执行另外一个代码块

浏览器支持

支持 支持 支持 支持 支持

语法

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

说明

if/else 语句是 JavaScript 条件语句的一部分, 条件语句用于基于不同的条件来执行不同的动作

JavaScript 提供了以下条件语句

  1. if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码。
  2. else 语句 如果 if 语句的条件为false,则执行该代码块
  3. else if 语句 - 检测一个新的条件,如果第一个条件为false
  4. switch 语句 - 选择多个代码块中其中一个执行

范例

如果当前时间(小时)小于 20:00, 在 id="demo" 元素上输出 "Good day"

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

运行范例 »

范例

如果时间小于 20:00, 生成一个 "Good day" 问候,否则输出 "Good evening"

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

运行范例 »

范例

修改文档中第一个 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="/static/i/img3.jpg" width="100" 
    height="180">
<script>

function changeImage() {
    var image = document.getElementById("myImage");

    if (image.src.match("img3"))
    {        
       image.src = "/static/i/img2.jpg";
    } else {        
       image.src = "/static/i/img3.jpg";
    }
}
</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 参考手册

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.