JavaScript 教程

JavaScript基础教程: JavaScript this 关键字; JavaScript 严格模式(use strict); JavaScript 提升(Hoisting); JavaScript Cookie; JavaScript 弹出框; JavaScript 表单验证; JavaScript 实践经验; JavaScript 常见错误; JavaScript 定时器(Timing); JavaScript 性能; JavaScript 调试; JavaScript 错误处理; JavaScript Boolean(布尔) 对象; JavaScript 正则表达式(RegExp); JavaScript 随机数(Random); JavaScript 事件监听; JavaScript 事件(Events); JavaScript 数组方法; JavaScript Array(数组) 对象; JavaScript 类型转换; JavaScript Math(算数) 对象; JavaScript 数值(Number); JavaScript 字符串方法; JavaScript 变量作用域; JavaScript 字符串(String); JavaScript break和continue语句; JavaScript While 循环; JavaScript 日期(Date); JavaScript For 循环; JavaScript 对象(Object); JavaScript 函数(Function); JavaScript switch语句; JavaScript 事件传播; JavaScript 条件语句; JavaScript 运算符优先级; JavaScript 数组迭代方法; JavaScript 变量; JavaScript 注释; JavaScript 数值方法; JavaScript 语句; JavaScript 输出; JavaScript 运算符; JavaScript 用法; JavaScript 常用示例; JavaScript 数据类型; JavaScript 语法; JavaScript continue 语句; JavaScript String lastIndexOf() 方法; JavaScript Math.cos() 方法; JavaScript Math.max() 方法; JavaScript if...else 语句; JavaScript Math.sin() 方法; JavaScript MIN_VALUE 属性; JavaScript String match() 方法; JavaScript eval() 函数; JavaScript Error message 属性; JavaScript Error name 属性; HTML DOM removeEventListener() 方法; JavaScript RegExp exec() 方法; JavaScript 数组 sort() 方法; JavaScript 数组 reverse() 方法; JavaScript 数组 indexOf() 方法; JavaScript 数组 slice() 方法; JavaScript 数组 lastIndexOf() 方法; JavaScript 数组 splice() 方法; JavaScript 数组 shift() 方法; JavaScript RegExp test() 方法; JavaScript 数组 isArray() 方法; JavaScript 数组 fill() 方法; JavaScript 数组 pop() 方法; JavaScript 数组 unshift() 方法; JavaScript 数组 length 属性; JavaScript 数组 push() 方法; JavaScript 数组 concat() 方法; JavaScript 数组 join() 方法; JavaScript 数组 toString() 方法; JavaScript String() 函数; JavaScript Math.random() 方法; JavaScript Math.ceil() 方法; JavaScript Math.floor() 方法; JavaScript Math.abs() 方法; JavaScript Math.sqrt() 方法; JavaScript Math.pow() 方法; JavaScript Math.round() 方法; JavaScript Math.PI 属性; JavaScript String charCodeAt() 方法; JavaScript String charAt() 方法; JavaScript isNaN() 函数; JavaScript Math.min() 方法; JavaScript String substr() 方法; JavaScript String substring() 方法; JavaScript String slice() 方法; JavaScript String replace() 方法; JavaScript String indexOf() 方法; JavaScript String split() 方法; JavaScript String search() 方法; JavaScript toUpperCase() 方法; JavaScript String concat() 方法; JavaScript String length 属性; JavaScript getUTCMinutes() 方法; JavaScript getUTCDate() 方法; JavaScript getUTCMonth() 方法; JavaScript getUTCHours() 方法; JavaScript String trim() 方法; JavaScript setMilliseconds() 方法; JavaScript setSeconds() 方法; JavaScript setTime() 方法; JavaScript getUTCMilliseconds() 方法; JavaScript setMinutes() 方法; JavaScript getUTCSeconds() 方法; JavaScript setMonth() 方法; JavaScript setHours() 方法; JavaScript setFullYear() 方法; JavaScript getTime() 方法; JavaScript setDate() 方法; JavaScript getUTCFullYear() 方法; JavaScript getMinutes() 方法; JavaScript getUTCDay() 方法; JavaScript getHours() 方法; JavaScript getMonth() 方法; JavaScript getDate() 方法; JavaScript getSeconds() 方法; JavaScript getMilliseconds() 方法; JavaScript getFullYear() 方法; JavaScript 数组 findIndex() 方法; JavaScript 数组 filter() 方法; JavaScript getDay() 方法; JavaScript 数组 every() 方法; JavaScript 数组 find() 方法; JavaScript 数组 map() 方法; JavaScript Date 对象; JavaScript Number.NaN 属性; JavaScript POSITIVE_INFINITY 属性; JavaScript 数组 forEach() 方法; JavaScript MAX_VALUE 属性; HTML DOM addEventListener() 方法; JavaScript 数组 reduce() 方法; JavaScript NEGATIVE_INFINITY 属性; JavaScript Number valueOf() 方法; JavaScript Number toString() 方法; JavaScript parseFloat() 函数; JavaScript parseInt() 函数; JavaScript Number() 函数; JavaScript toFixed() 方法; JavaScript for...of 语句; JavaScript toExponential() 方法; JavaScript do...while 语句; JavaScript while 语句; JavaScript for...in 语句; JavaScript toPrecision() 方法; JavaScript switch 语句; JavaScript throw 语句; HTML DOM console.log() 方法; HTML DOM getElementById() 方法; Window alert() 方法; JavaScript for 语句; HTML DOM innerHTML 属性; JavaScript undefined 属性; HTML DOM write() 方法; HTML DOM style 属性; JavaScript null 空值; JavaScript try...catch 语句; JavaScript break 语句; JavaScript var 语句; JavaScript let 语句; JavaScript const 语句; JavaScript Date.UTC() 方法; JavaScript Date.now() 方法; JavaScript toTimeString() 方法; JavaScript Date toString() 方法; JavaScript toISOString() 方法; JavaScript toJSON() 方法; JavaScript toDateString() 方法; JavaScript toUTCString() 方法; JavaScript setUTCSeconds() 方法; JavaScript Date.parse() 方法; JavaScript setUTCMonth() 方法; JavaScript Date valueOf() 方法; JavaScript setUTCMilliseconds() 方法; JavaScript setUTCHours() 方法; JavaScript toLocaleTimeString() 方法; JavaScript setUTCMinutes() 方法; JavaScript Date constructor 属性; JavaScript toLocaleDateString() 方法; JavaScript toLocaleString() 方法; JavaScript setUTCFullYear() 方法; JavaScript setUTCDate() 方法; JavaScript getTimezoneOffset() 方法; JavaScript Date prototype 属性

JavaScript 对象: JavaScript 对象原型; JavaScript 对象构造函数; JavaScript 创建对象; JavaScript 对象方法; JavaScript 对象属性

JavaScript 函数: JavaScript 闭包; JavaScript 函数应用; JavaScript 函数调用; JavaScript 函数参数; JavaScript 函数定义

JS HTML DOM: JS DOM 改变元素属性; JS DOM 改变CSS; JS DOM Navigation; JS DOM 改变HTML内容; JS HTML DOM选择器; JS HTML DOM方法; JS HTML DOM(文档对象模型)

JS 浏览器BOM: JS Window History; JS Window Navigator; JS Window Location; JS Window 浏览器对象模型; JS Window Screen

AJAX 基础教程

JavaScript 参考手册

当前位置：首页 JavaScript JavaScript 教程 JavaScript基础教程

JavaScript if...else 语句

发布时间：2016-03-02 修改时间：2023-02-24 由网友大卫发布阅读 13

JavaScript if...else 语句

JavaScript 语句和变量声明

if... else语句是JavaScript条件语句之一，用于根据不同的条件执行不同的操作。

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

if指定的条件为true，则使用if指定要执行的代码块
如果相同条件为false，则使用else来指定要执行的代码块
如果第一个条件为false，则使用else if指定要测试的新条件
使用switch从要执行的许多代码块中选择一个

语法：

if条件为true，则if语句指定要执行的代码块：

if (condition) {
 //如果条件为true，则执行的代码块
}

else语句指定如果条件是false的要执行的代码块：

if (condition) {
    //如果条件为true，则执行的代码块
} else {
   //如果条件为false，则执行的代码块
}

eelse if语句指定了一个新的条件，如果第一个条件为false:

if (condition1) {
   //如果条件1为true，则执行的代码块
} else if (condition2) {
   //如果条件1为假而条件2为true，则执行的代码块
} else {
   //如果条件1和条件2为false，则执行的代码块
}

示例

var x = -4;
if (x < 0) {
   document.getElementById("result").innerHTML = "NEGATIVE";
}

测试看看‹/›

浏览器兼容性

所有浏览器完全支持if ... else语句：

Statement
if...else	是	是	是	是	是

参数值

参数	描述
condition	计算结果为true或false的表达式

技术细节

JavaScript版本：	ECMAScript 1

更多实例

如果变量x的值小于0，则输出“ NEGATIVE”，否则输出“ POSITIVE”：

示例

var x = -4;
if (x < 0) {
   msg = "NEGATIVE";
} else {
   msg = "POSITIVE";   
}

测试看看‹/›

如果x等于10，则写“ x为10”，如果不等于，但x等于20，则写“ x为20”，否则写为“ x不存在”：

示例

var x = 20;

if (x === 10) {
   document.write("x 为 10");
} else if (x === 20) {
   document.write("x 为 20");
} else {
   document.write("x不存在");
}

测试看看‹/›

您可以使用多个else if语句：

示例

// 设置学生的当前成绩
var grade = 88;

//检查成绩是否为A，B，C，D或F
if (grade >= 90) {
   document.write("A");
} else if (grade >= 80) {
   document.write("B");
} else if (grade >= 70) {
   document.write("C");
} else if (grade >= 60) {
   document.write("D");
} else {
   document.write("F");
}

测试看看‹/›

您可以编写不带花括号的单行语句：

示例

var x = -4;
if (x < 0)
   msg = "NEGATIVE";
else
   msg = "POSITIVE";

测试看看‹/›

如果用户单击图像，请更改图像的src属性的值：

示例

<img id="demo" onclick="changeImage()" src="avatar-female.jpg">

<script>
function changeImage() {
   var image = document.getElementById("demo");
   if (image.src.match("female")) {
   image.src = "avatar-male.jpg";
   } else {
   image.src = "avatar-female.jpg";
   }
}
</script>

测试看看‹/›

使用if ... else语句验证输入数据：

示例

function myFunc(x) {
   var text;

//如果x不是一个数字，或者小于10，或者大于20，输出“Input not valid”
//如果x是10到20之间的数字，则输出“Input OK”

   if (isNaN(x) || x < 10 || x > 20) {
  text = "Input not valid";
   } else {
  text = "Input OK";
   }

document.getElementById("result").innerHTML = text;
}

测试看看‹/›

嵌套if ... else语句：

示例

var a = 10, b = 20, c = 30;
var answer;

if (a > b) {
   if (a > c) {
  answer = "A is the greatest among three";
   } else {
  answer = "C is the greatest among three";
   }
} else if (b > c) {
   answer = "B is the greatest among three";
} else {
   answer = "C is the greatest among three";   
}

测试看看‹/›

也可以参考

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

JavaScript教程：JavaScript switch

JavaScript 语句和变量声明

JavaScript Math.max() 方法 JavaScript Math.sin() 方法