JS中 if 语句的小练习

JS中 if 语句的小练习

1. 通过 if 语句判断一个数字是不是偶数

分析1:判断一个数是不是偶数,就是代表这个数除以2不会有余数,这个数要被整除才会是偶数,不被整除那就不是偶数。
所以,我们定义一个变量 num 来表示这个数
接着如果 num % 2 === 0 就是偶数,否则就不是
接着转变为代码:

	var num = 520
	if (num % 2 === 0) {
		console.log('是偶数')
	} else {
		console.log('不是偶数')
	}

分析2:mun % 2 的结果要么是 0,要么是 1 。如果是 1 就不是偶数,如果不是 1 就是偶数
接着转变成代码:

	var num = 520
	if (num % 2 === 1) {
		console.log('不是偶数')
	} else {
		console.log('是偶数')
	}

分析3:mun % 2 的结果要么是 0,要么是 1 。0 就是 false , 1 就是 true
接着转变成代码:

	var num = 520
	if (num % 2) {
      // 能进入 if 条件, 证明 num % 2 === true
      // 证明 num % 2 结果是 1
      // 表示 num 是一个 奇数
      console.log('不是偶数')
    } else {
      // 能进入 else, 就表示 num % 2 === false
      // 证明 num % 2 的结果是 0
      // 表示 num 是一个 偶数
      console.log('是偶数')
    }
	
2. 通过 if 语句判断平闰年

分析:
什么是闰年:一个年份,能被4整除 ,并且 不能被100整除, 或者能被400 整除
什么是平年:不是上面条件得到的就是平年
条件一:能被4整除: 年份%4 === 0
条件二:不能被100整除: 年份%100 !== 0
条件三:能被400整除: 年份%400 === 0
梳理下这三个条件的关系:
条件一 && 条件二 || 条件三
接着转变成代码:

	var year = 2020
	//year % 4 === 0  得到的是true
	//year % 100 !=== 0  得到是false
	//year % 400 === 0  得到的是true
	//最终结果就是 true && false || true   ==> 得到的是一个 true
	if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
		console.log(year + '年 是闰年')
	} else {
		console.log(year + '年 是平年')
	}
3. 通过 if 语句判断成绩等级

题目:
当成绩在 90 ~ 100 之间的时候, 在控制台输出一个 A
当成绩在 80 ~ 89 之间的时候, 在控制台输出一个 B
当成绩在 70 ~ 79 之间的时候, 在控制台输出一个 C
当成绩在 60 ~ 69 之间的时候, 在控制台输出一个 D
当成绩 < 60 的时候, 在控制台输出一个 E
分析1:
mun>=90 && num<=100 输出A
mun>=80 && num<=89 输出B
mun>=70 && num<=79 输出C
mun>=60 && num<=69 输出D
num<60 输出E
转换成代码:

	var num = 88
	if (num>=90 && num<=100) {
		console.log('A')
	} else if (num>=80 && num<90) {
		console.log('B')
	} else if (num>=70 && num<80) {
		console.log('C')
	} else if (num>=60 && num<70) {
		console.log('D')
	} else if (num < 60) {
		console.log('E')
	}

分析2:
num>=90 输出A
num>=80 输出B
num>=70 输出C
num>=60 输出D
以上都不符合输出E
转换成代码:

	var num = 59
	if (num>=90) {
		console.log('A')
	} else if (num>=80) {
		console.log('B')
	} else if (num>=70) {
		console.log('C')
	} else if (num>=60) {
		console.log('D')
	} else {
		console.log('E')
	}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 以下是可以实现您所描述的功能的代码: ```html <!DOCTYPE html> <html> <head> <title>JS If语句练习</title> <style> body, html { height: 100%; margin: 0; padding: 0; } #div1 { background-color: red; height: 100%; width: 100%; display: none; } #div2 { background-color: blue; height: 100%; width: 100%; display: none; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <script> var status = 1; if (status == 1) { document.getElementById("div1").style.display = "block"; } else if (status == 2) { document.getElementById("div2").style.display = "block"; } </script> </body> </html> ``` 当 `status` 的值为 1 时,显示红色的 `div1`;当 `status` 的值为 2 时,显示蓝色的 `div2`。如果 `status` 的值不是 1 或 2,那么两个 `div` 都不会显示。 ### 回答2: 可以通过以下的js-if语句实现上述要求: ```javascript var status = 1; // 根据需求设定status的值 if (status === 1) { // 当status为1时,显示div1 document.getElementById("div1").style.width = "100%"; document.getElementById("div1").style.height = "100%"; document.getElementById("div1").style.backgroundColor = "red"; // 隐藏div2 document.getElementById("div2").style.display = "none"; } else if (status === 2) { // 当status为2时,显示div2 document.getElementById("div2").style.width = "100%"; document.getElementById("div2").style.height = "100%"; document.getElementById("div2").style.backgroundColor = "blue"; // 隐藏div1 document.getElementById("div1").style.display = "none"; } ``` 在上述代码,我们通过将相应的CSS样式属性设置为满屏宽高和相应的背景颜色,来达到div1和div2的要求。同时,根据status的值来决定显示哪个div,并设置另一个div为隐藏。其,"div1"和"div2"需要替换成相应的div的id或class名称。 ### 回答3: 在JavaScript,可以使用if语句根据不同的条件来决定显示哪个div。根据题目描述,我们需要根据status的不同值来显示div1或div2。 首先,我们需要在HTML创建两个div,一个是红色的div1,另一个是蓝色的div2。设置它们的宽度和高度均为100%,以使其满屏。 在JavaScript,我们定义一个变量status,并赋予不同的值来判断显示哪个div。根据题目要求,当status的值为1时,我们需要显示div1,当status的值为2时,我们需要显示div2。 我们可以使用document.getElementById()方法来获取对应的div元素,并使用.style属性来改变其显示样式。下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <style> #div1 { width: 100%; height: 100%; background-color: red; } #div2 { width: 100%; height: 100%; background-color: blue; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <script> var status = 1; if (status === 1) { document.getElementById("div1").style.display = "block"; } else if (status === 2) { document.getElementById("div2").style.display = "block"; } </script> </body> </html> ``` 在上述代码,我们定义了两个div元素,id分别为div1和div2,设置它们的宽度和高度为100%以达到满屏效果,并分别给它们设置了红色和蓝色的背景颜色。然后,在JavaScript,我们将status的值设为1,通过if语句判断status的值,并使用document.getElementById()来获取对应的div元素,通过设置.style.display属性来改变其显示状态,使其显示或隐藏。根据status的不同值,div1或div2将会被显示出来。 以上就是根据题目描述使用js的if语句练习来实现宽高满屏的div1和div2的回答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值