JavaScript-------条件语句

最新推荐文章于 2024-02-07 00:15:00 发布
最新推荐文章于 2024-02-07 00:15:00 发布
阅读量350 收藏 7
点赞数 9
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmHuney/article/details/135843802
版权

1.if...else

let f = false;
let a;
if(f ===true){
  a = 10;
}else{
  a = 5;
}

结果展示：

 

不必直接明确指定 'a === true'，例如：

let a = false;
let b;
if (a) {
  b = 10;
} else {
  b = 5;
}

结果展示：

 

2.else if

html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <label for="weather">选择今天的天气：</label>
     <select id="weather">
        <option value="">做出选择</option>
        <option value="sunny">晴天</option>
        <option value="rainy">雨天</option>
        <option value="snowing">下雪天</option>
     </select>
     <p></p>
     <script src="scripts/main1.js" defer></script> 
</body>
</html>

 js文件中：

const select = document.querySelector("select");
const para =document.querySelector("p");
select.addEventListener("change",setWeather);
function setWeather(){
  const choice = select.value;
  if(choice ==="sunny"){
    para.textContent = "晴天晴天晴天"
  }else if(choice === "rainy"){
    para.textContent = "下雨天下雨天"
  }else if(choice === "snowing"){
    para.textContent = "下雪啦下雪啦"
  }else{
    para.textContent = "";
  }
}

结果展示：

 

3.嵌套if...else 

const select = document.querySelector("select");
const para =document.querySelector("p");
select.addEventListener("change",setWeather);
function setWeather(){
  const choice = select.value;
  let temperature = 90;
if (choice === "sunny") {
  if (temperature < 86) {
    para.textContent = `外面现在是 ${temperature} 华氏度——风和日丽。`;
  } else if (temperature >= 86) {
    para.textContent = `外面现在是 ${temperature} 华氏度——很热！`;
  }
}
}

 结果展示：

可以不给temperature赋值，从控制台输入，随之更改内容，代码可更改为：

const select = document.querySelector("select");
const para =document.querySelector("p");
select.addEventListener("change",setWeather);
let temperature;
function setWeather(){
  const choice = select.value;
  if (choice === "sunny") {
    if (temperature < 86) {
      para.textContent = `外面现在是 ${temperature} 华氏度——风和日丽。`;
    } else if (temperature >= 86) {
      para.textContent = `外面现在是 ${temperature} 华氏度——很热！`;
    }
  }
  }

结果展示：

控制台输入：

选择晴天就会显示以下内容：

4.与   或  非

①&&——逻辑与。允许你把两个或多个表达式连在一起，这样所有的表达式都必须单独评估为 true，整个表达式才能返回 true。

②||——逻辑或。允许你把两个或多个表达式连在一起，其中一个或多个表达式必须单独评估为 true，整个表达式才能返回 true。

1.逻辑与------例子：

const select = document.querySelector("select");
const para =document.querySelector("p");
select.addEventListener("change",setWeather);
let temperature;
function setWeather(){
const choice = select.value;
if (choice === "sunny" && temperature < 86) {
  para.textContent =
    "外面现在是" +
    temperature +
    " 华氏度——风和日丽。让我们去海滩或公园，吃个冰激凌。";
} else if (choice === "sunny" && temperature >= 86) {
  para.textContent =
    "外面现在是" +
    temperature +
    " 华氏度——很热！如果你想出去，一定要涂抹一些防晒霜。";
}
}

结果显示： 

 

2.逻辑或-----例子：

let iceCreamVanOutside = "on fire";
let houseStatus = "no fire";
if (iceCreamVanOutside || houseStatus === "on fire") {
  console.log("你需要赶紧离开这间房子。");
} else {
  console.log("或许你应该呆在这里。");
}

结果展示： 

 

 

 

 ③逻辑非 ! 运算符可以用于对一个表达式取否。

let iceCreamVanOutside = "on fire";
let houseStatus = "no fire";
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('或许你应该呆在这里。');
} else {
  console.log("你需要赶紧离开这间房子。");
}

结果展示：

 

5.Switch语句

html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<label for="weather">选择今天的天气：</label>
     <select id="weather">
        <option value="">做出选择</option>
        <option value="sunny">晴天</option>
        <option value="rainy">雨天</option>
        <option value="snowing">下雪天</option>
     </select>
     <p></p>
     <script src="scripts/main1.js" defer></script> 
</body>
</html>

 js文件中：

const select = document.querySelector("select");
const para = document.querySelector("p");
select.addEventListener("change",setWeather);
function setWeather(){
  const choice = select.value;
  switch(choice){
    case "sunny":para.textContent = "阳光明媚";break;
    case "rainy":para.textContent = "下雨天";break;
    case "snowing":para.textContent = "下雪啦";break;
    default:
      para.textContent ="";
  }
}

结果展示：

选择  晴天  显示：

6.三元运算符 

let isbirthday;
const greeting = isbirthday ? "生日快乐" : "你好";

结果展示：

 

let isbirthday = true;
const greeting = isbirthday ? "生日快乐" : "你好";

结果展示：

 

let isbirthday = false;
const greeting = isbirthday ? "生日快乐" : "你好";

结果展示：

 

 

 

三元运算符实例：

html文件中显示：

<label for="theme">选择主题：</label>
<select id="theme">
  <option value="white">白</option>
  <option value="black">黑</option>
</select>
<h1>你好</h1>

 在js文件中显示：

const select = document.querySelector("select");
const html = document.querySelector("html");
document.body.style.padding = "10px";

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.addEventListener("change", () =>
  select.value === "black"
    ? update("black", "white")
    : update("white", "black"),
);

结果展示：

程序员的客栈
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript-practice-problems
05-26
1. **基本语法**：包括变量声明（var, let, const）、数据类型（字符串、数字、布尔、null、undefined、对象、数组、Symbol）、运算符（算术、比较、逻辑、三元）、流程控制（条件语句、循环语句）。 2. **函数**：...
Javascript-Projects:有趣JavaScript项目
03-19
- **条件语句**：如`if...else`和`switch`用于根据不同条件执行不同代码块。 - **循环**：包括`for`和`while`循环，用于重复执行某段代码。 3. **函数** - **定义与调用**：函数是可重用的代码块，通过函数可以...
JavaScript 条件语句
weixin_30815469的博客
08-09 69
if语句 有些代码块只能在一定条件下运行，通过if、if else、else代码块，可以让你的代码按条件执行。 // 控制流 var foo = true; var bar = false; if ( bar ) { // 这里的代码将无法运行。 console.log( "hello!...
JavaScript条件
wen0627的博客
04-10 289
按照顺序看下去 1、if 语句来规定假如条件为 true 时被执行的 JavaScript 代码，语法如下。 2、需要注意的是写if的时候要写小写不能大写，不然会导致JavaScript错误。 3、If实例时间，如果时间早于 18:00，则发出 "Good day" 的问候。 4、Else语句来规定假如条件为 false 时的代码，语法如下。 5、else实例：如果hour小于18，则创建 "Good day" 回答，否则则 "Good evening"。 ...
JavaScript条件语句
qq_44329870的博客
12-10 155
JavaScript条件语句 条件语句用于基于不同的条件来执行不同的动作。 类型 描述 if 语句 只有当指定条件为 true 时，使用该语句来执行代码 if…else 语句 当条件为 true 时执行代码，当条件为 false 时执行其他代码 if…else if…else 语句 使用该语句来选择多个代码块之一来执行 switch 语句 使用该语句来选择多个代码块之一来执行 1.if 语句 代码举例: function addCount() { var count
实验2-开始JavaScript编程.docx
12-21
- 条件判断：`if`语句用于决定是否执行特定代码块，如`if(ctype=="miss"){...}`。 - DOM操作：通过`document.getElementById()`获取元素，`element.style.property`修改样式属性。 - 事件处理：将函数绑定到HTML...
教学进度表-Javascript程序设计.docx
12-16
从 JavaScript 的起源到 JavaScript 的高级应用，涵盖了 JavaScript 的基础知识、JavaScript 的实现、JavaScript 小体验、JavaScript 环境搭建、JavaScript 类型、JavaScript 变量和关键字、条件语句、循环语句、...
javascript-fundamentals:这是参考依据
04-17
- 条件语句如`if...else`用于根据条件执行不同代码块。 - 循环结构如`for`、`while`、`do...while`用于重复执行代码。 - `switch`语句提供了一种多分支选择。 6. **数组（Arrays）** - JavaScript中的数组使用...
JavaScript中的条件语句
Jsy_997的博客
04-18 635
js中的条件语句
【JavaScript】条件语句
最新发布
好久不见的流星
02-07 564
条件语句在 JavaScript 中是控制程序流程的关键，它允许你根据不同的条件选择执行不同的代码块。通过ifelse ifelse的组合，以及switch语句，你可以更灵活地处理不同情况的逻辑。在编写代码时，合理运用条件语句，确保代码的可读性和逻辑清晰性是非常重要的。希望通过本篇博客，你对 JavaScript 中的条件语句有了更深入的理解。
JavaScript基础知识--条件语句
weixin_68211919的博客
08-03 666
E} A：指初始条件 B：循环的条件 C：迭代操作 E：循环体。3.for循环：for循环就是机械的执行相同的代码，但每次的结果都不同，可以控制for的循环次数。2.if.....else语句：当满足条件时执行if中的代码块，否则执行else中的代码块。条件语句是在不同的条件下来执行不同的操作，今天学的内容是if和if..else，for三种。{条件成立执行的代码块}运行的顺序：1A--2B--3E--4C--2B-3E-4C-.....
第四节JavaScript 条件语句、循环语句、break与continue语句
yyxhzdm的博客
12-10 1086
即：根据不同时间段，显示生成不同的问候语，当time小于10点之前，问候语时“早上好”，当time大于等于10 且小于20点时，问候语是“今天好”，当time大于等于20点时，问候语是“晚上好”。如果上述实例中不加break语句，那么打印的结果就是0~9了，加上break之后，在i=3时触发break语句，跳出for循环，所以只打印到2就结束了。在通常的代码中，我们有一些需要决定执行不同动作，这就可以在代码中使用条件语句来完成。当条件为true时执行代码，当条件为false时执行其它代码。
JavaScript 中 if 条件判断
u013178480的博客
06-12 693
JS中，If 语句判断为false的变量值为： false, 0, 0.0, null, undefined　　　          其他变量值判断为true: true, 1, [任何字串/数字]if('' || undefined || 0 || null || 0.0 || 0.00 ||0.0000){ alert('true') }else{ alert('fal...
js条件语句
m0_62214280的博客
01-05 912
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
关于JavaScript的条件语句和循环语句
Hhjian524的博客
09-27 376
1.条件语句 ： if if-else else-if: if语句: demo： &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; if(表达式){ document.write(输出); } &amp;lt;/script&amp;gt; 如果if中的表达式成立的话，就会执行一次输出语句，不成立的话就不会执行。 if-else: demo: &amp;lt
JavaScript系列之条件运算符
老__L的博客
07-06 2017
条件（三元）运算符是JavaScript仅有的使用三个操作数的运算符。一个条件后面会跟一个问号（?），如果条件为 true ，则问号后面的表达式 A 将会执行；表达式 A 后面跟着一个冒号（:），如果条件为 false ，则冒号后面的表达式 B 将会执行。本运算符经常作为 if 语句的简捷形式来使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值