加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript if/else 语句

JavaScript基础 2022-06-08 11:18:10小码哥的IT人生shichen

JavaScript if/else 语句

实例

如果当前时间 (HOUR) 小于 20:00，则在 id="demo" 的元素中输出 "Good day"：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击按钮显示 "Good day"，仅当时间小于 20:00 时。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var time = new Date().getHours();
  if (time < 20) {
    document.getElementById("demo").innerHTML = "Good day";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

if/else 语句在指定条件为真时执行代码块。如果条件为假，则可以执行另一代码块。

if/else 语句是 JavaScript 的“条件”语句的一部分，用于根据不同的条件执行不同的操作。

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

  1. 使用 if 指定要执行的代码块，如果指定条件为真
  2. 使用 else 指定要执行的代码块，如果相同条件为假
  3. 如果第一个条件为假，则使用 else if 指定要测试的新条件
  4. 使用 switch 选择要执行的多个代码块之一

浏览器支持

语句 Chrome IE Firefox Safari Opera
if/else 支持 支持 支持 支持 支持

语法

if 语句指定在条件为真时要执行的代码块：

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

else 语句指定在条件为假时要执行的代码块：

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
}

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

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
}

参数值

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

技术细节

JavaScript 版本： ECMAScript 1

更多实例

示例代码：

如果时间小于 20:00，则创建 "Good day" 问候语，否则创建 "Good evening"：

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击这个按钮可显示基于时间的问候语。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var time = new Date().getHours();
  var greeting;
  if (time < 20) {
    greeting = "Good day";
  } else {
    greeting = "Good evening";
  }
  document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

如果时间小于 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";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击这个按钮可显示基于时间的问候语。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var time = new Date().getHours();
  var greeting;
  if (time < 10) {
    greeting = "Good morning";
  } else if (time < 20) {
    greeting = "Good day";
  } else {
    greeting ="Good evening";
  }
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

如果文档中的第一个 <div> 元素的 id 为 "myDIV"，则更改其字体大小：

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") { 
  x.style.fontSize = "30px";
}

完整实例：

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
  width: 300px;
  height: 50px;
  text-align: center;
  background-color: coral;
  color: white;
  margin-bottom: 10px;
  float: left;
  margin: 8px;
}
</style>
</head>
<body>
<p>在本例中，我们搜索文档中的第一个 div 元素。然后，如果 div 元素的 id 为 "myDIV" - 更改其字体大小。</p>
<button onclick="myFunction()">试一试</button><br>
<div id="myDIV" class="mystyle">
I am a DIV element
</div>
<div class="mystyle">
I am also DIV element
</div>
<script>
function myFunction() {
  var x = document.getElementsByTagName("DIV")[0];
  if (x.id === "myDIV") { 
    x.style.fontSize = "30px";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

当用户单击图像，更改 <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>

完整实例：

<!DOCTYPE html>
<html>
<body>
<img id="myImage" onclick="changeImage()" src="/i/eg_bulboff.gif" width="109" height="180">
<p>单击灯泡以打开/关闭灯。</p>
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("eg_bulbon")) {
    image.src = "/i/eg_bulboff.gif";
  } else {
    image.src = "/i/eg_bulbon.gif";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

根据用户输入显示消息：

var letter = document.getElementById("myInput").value;
var text;
// 如果字母为 "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// 如果字母为 "b" 或 "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// 如果是其他字母
} else {
  text = "Waaay off..";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>我在想一个字母。猜猜是哪个：a、b、c、d 或 e？</p>
<input id="myInput" type="text">
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var letter = document.getElementById("myInput").value;
  var text;
  // 如果字母是 "c"
  if (letter === "c") {
    text = "Spot on! Good job!";
  // 如果字母是 "b" 或 "d"
  } else if (letter === "b" || letter === "d") {
    text = "Close, but not close enough.";
  // 如果是其他字母
  } else {
    text = "Waaay off..";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

验证输入数据：

var x, text;
// 获取 id="numb" 的输入字段的值
x = document.getElementById("numb").value;
// 如果 x 不是数字或小于 1 或大于 10，则输出 "input is not valid"
// 如果 x 是 1 到 10 之间的数字，则输出 "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>请输入一个 1 到 10 之间的数字：</p>
<input id="numb" type="text">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x, text;
  // 获取 id="numb" 的输入字段的值
  x = document.getElementById("numb").value;
  // 如果 x 不是数字或小于 1 或大于 10，则输出 "Input not valid"
  // 如果 x 是 1 到 10 之间的数字，则输出 "Input OK"
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
 

补充案例：给定文件的字节数，计算文件的大小【KB、MB 或 GB】

//给定文件大小的字节数（单位：Byte）
let size = 29636115;
//自定义函数 getFileSize 计算文件大小【KB、MB 或 GB】
function getFileSize(size){
    let filesize;
    if(size < 1024){//小于1KB
        filesize = size + 'Byte';
    }else if(size < 1024*1024){//小于1MB
        filesize = parseFloat(size/1024).toFixed(2) + 'KB';
    }else if(size < 1024*1024*1024){//小于1GB
        filesize = parseFloat(size/(1024*1024)).toFixed(2) + 'MB';
    }else{//大于1GB
        filesize = parseFloat(size/(1024*1024*1024)).toFixed(2) + 'GB';
    }
    return filesize;    
}
console.log(getFileSize(size));
注：上述示例中使用的 let 为ES6语法

相关页面

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

JavaScript 教程：JavaScript Switch 语句

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024