码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript if...else

❮上一节 JavaScript声明 下一节❯

示例

如果小时小于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 的 "Conditional" 语句的一部分，用于根据不同的条件执行不同的操作。

在 JavaScript 中，我们有以下条件语句：

  • 使用如果指定在指定条件为真时要执行的代码块
  • 使用别的指定在相同条件为 false 时要执行的代码块
  • 使用否则如果如果第一个条件为 false，则指定要测试的新条件
  • 使用Switch选择要执行的多个代码块之一

语法

这个如果语句指定条件为真时要执行的代码块：

if ( condition) {
  // block of code to be executed if the condition is true
}

这个别的语句指定条件为假时要执行的代码块：

if ( condition) {
  // block of code to be executed if the condition is true
} else {
  // block of code to be executed if the condition is false
}

这个否则如果如果第一个条件为假，语句指定一个新条件：

if ( condition1) {
  // block of code to be executed if condition1 is true
} else if ( condition2) {
  // block of code to be executed if the condition1 is false and condition2 is true
} else {
  // block of code to be executed if the condition1 is false and condition2 is false
}

参数值

Parameter Description
condition Required. An expression that evaluates to true or 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;

// If the letter is "c"
if (letter === "c") {
  text = "Spot on! Good job!";

// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";

// If the letter is anything else
} else {
  text = "Waaay off..";
}
亲自试一试 »

验证输入数据：

var x, text;

// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;

// If x is Not a Number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"

if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}
亲自试一试 »

相关页面

JavaScript 教程：JavaScript If...Else 语句

JavaScript 教程：JavaScript Switch 语句

浏览器支持

if...else是 ECMAScript1 (ES1) 功能。

所有浏览器均完全支持 ES1 (JavaScript 1997)：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮上一节 JavaScript声明 下一节❯