JS作业(2).作业及解析

最新推荐文章于 2024-06-18 10:01:58 发布
最新推荐文章于 2024-06-18 10:01:58 发布
阅读量867 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39872652/article/details/104660842
版权

珠峰培训 - 第二天课后作业及解析(FruitJ)

文章目录

一、练习题 :

1. 输出下面程序运行的结果

=>

  • continue 跳出本轮循环
  • break 结束当前循环
    -1).
for (var i = 0; i < 10; i++) {
    console.log(i); // 0 【循环一次】
    break;
}
console.log(i); // 0

解析: 此题循环一次, 遇到 break 。最外层作用域中也能访问到 i 的原因是 ES5 之前的语法没有 块级作用域 (只有函数有函数作用域)。

-2).

for (var i = 0; i < 10; i++) {
    continue;
    console.log(i);
}
console.log(i); // 10 【循环 11 次】

解析: continue 在打印语句之前。

-3).

for (var i = 1; i <= 10; i += 2) {
    if (i <= 5) {
        i++;
        continue;
    } else {
        i -= 2;
        break;
    }
    i--;
    console.log(i);
    // 【循环 3 次】
}
console.log(i); // 5

解析: 前两次 continue , 最后一次 break 。

-4).

for (var i = 3; i < 12; i++) {
    if (i < 3) {
        i++;
        break;
    }
    if (i > 9) {
        i += 2;
        continue;
    }
    i--;
}
console.log(i);

解析: console.log(i); 不会被执行, 前面的代码陷入死循环。

2. 把下面的程序改写成为三元运算符，并算出结果

let a = 12;
if (a >= 0 && a <= 20) {

    if (a % 2 === 0) {
        a += 2;
    }
} else {
    a -= 2;
}
// (a >= 0 && a <= 20) ? (a % 2 === 0) ? a += 2 : null : a -= 2 ;
console.log(a); // 14

3. 算出输出的结果

let a = typeof typeof typeof [12,23];
console.log(a); // string

4. 算出输出的结果

let a = '10';
a == 10 ? a++ : a--;
console.log(a); // 11
​
let b = '10';
switch (b) {
    case 10:
        b++;
        break;
    default:
        b--;
}
console.log(b); // 9

解析: a++ 会自动调用 Number() 转型函数将数据类型转换为 number 类型

5. 实现入下图中的案例效果

在这里插入图片描述

<!doctype html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
	html, 
	body {
		overflow: hidden;
		margin: 0;
		padding: 0;
		height: 100%;
		background-color: #FFF;
	}
  </style>
 </head>
 <body>
  <button id="btn">白、红、绿、蓝、黑、白</button>

  <script type="text/javascript">
	// 获取目标元素(#btn)
	let btn = document.querySelector("#btn");
	// 定义颜色队列
	let queue_colors = ["(255,255,255)", "(255,0,0)", "(0,128,0)", "(0,0,255)", "(0,0,0)"];
	// 为目标元素(#btn) 绑定点击事件
	btn.addEventListener('click', function() {
		// 获取 body 的 rgb 颜色值
		let current_color = window.getComputedStyle(document.body, null).backgroundColor.replace("rgb", "");
		// 格式化颜色值
		current_color = current_color.replace(/\s/g, "");
		// 定义下一次的颜色值
		let color = "";
		// 确定下一次颜色值
		for(let i = 0; i < queue_colors.length; i++) {
			
			(current_color === queue_colors[i]) ? color = queue_colors[(i + 1) >= queue_colors.length ? 0 : (i + 1)] : null ;
		}
		// 改变 body 背景色
		document.body.style.cssText = `
			 background-color: rgb${ color };
		`;
	}, false);
  </script>
 </body>
</html>

6.扩展：其他班老师出的“变态题”


!(!"Number(undefined)"); // true 【!(!true)】
​
isNaN(parseInt(new Date())) + Number([1]) + typeof undefined; // "2undefined" 【true + 1 + "undefined"】
​
Boolean(Number("")) + !isNaN(Number(null)) + Boolean("parseInt([])") + typeof !(null); // "2boolean" 【false + true + true + "boolean"】
​
parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null); // "2.6number" 【1.6 + 1 + "number"】
​
isNaN(Number(!!Number(parseInt("0.8")))); // false 【isNaN(0)】
​
console.log(1 + "2" + "2"); // "122"
​
!typeof parseFloat("0"); // false 【!true】
​
Number(""); // 0
​
typeof "parseInt(null)" + 12 + !!Number(NaN); // "string12false" 【"string" + 12 + false】
​
!typeof (isNaN("")) + parseInt(NaN); // NaN 【false + NaN】
​
typeof !parseInt(null) + !isNaN(null); // "booleantrue" 【"boolean" + true】

7.扩展实现如下的需求 ( 判断用户输入的数字，是正数还是负数 )

在这里插入图片描述
=> 正则方式实现

<!doctype html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
	html, 
	body {
		overflow: hidden;
		margin: 0;
		padding: 0;
		height: 100%;
		
	}
  </style>
 </head>
 <body>
	<input type="text" name="userPhone" placeholder="phone...">
	<button class="btn">验证</button>  
	
  <script type="text/javascript">
	
	// 获取目标元素(input[name=userPhone])
	let oInput = document.querySelectorAll("[name=userPhone]")[0];
	// 获取目标元素(.btn)
	let btn = document.querySelectorAll(".btn")[0];
	// 为目标元素(.btn])绑定点击事件
	btn.addEventListener('click', function() {
		// 获取当前表单输入数据
		let val = oInput.value;
		// 定义正则
		let reg = /^[-+\d]?\d+$/;
		// 判断输出
		val !== "" ? reg.test(val) ? val === "0" ? console.log("既不是正数也不是负数") : val.substr(0, 1) === "-" ? console.log("当前输入数值为负数") : console.log("当前输入数值为正数") : console.log("当前输入数值不合法!") : console.log("请输入数值") ;
	}, false);
  </script>
 </body>
</html>

-1). 判断输入的年份是闰年还是平年
-2). 判断输入的数字是偶数还是奇数
-3). 根据输入的分数，判定成绩等级
-1)、-2)、-3) 共用一套代码


<!doctype html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
	html, 
	body {
		overflow: hidden;
		margin: 0;
		padding: 0;
		height: 100%;
		
	}
  </style>
 </head>
 <body>
	<input type="text" name="input" placeholder="please ...">
	<button class="btn">验证</button>  
	
  <script type="text/javascript">
	
	// 获取目标元素(input[name=input])
	let oInput = document.querySelectorAll("[name=input]")[0];
	// 获取目标元素(.btn)
	let btn = document.querySelectorAll(".btn")[0];
	// 为目标元素(.btn])绑定点击事件
	btn.addEventListener('click', function() {
		// 获取当前表单输入数据
		let val = oInput.value;
		// 定义正则
		let reg = /^\d+$/;
		// 判断输出
		reg.test(val) ? ( 
			// 判断年份
			// console.log(utils.judgeYears(Number(val)))

			// 判断奇偶数
			// console.log(utils.judgeNumber(Number(val)))

			// 根据输入的分数，判定成绩等级 (90分及以上“优秀”   80分及以上"中等"   70分及以上"及格"  70分以下"不及格")
			// console.log(utils.judgeGrade(Number(val)))
		) : console.log("输入不合法") ;
	}, false);

	let utils = {
		judgeYears(year) {
			return `${year}`.length !== 4 ? "输入不合法" : ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) ? "闰年" : "平年";
		},
		judgeNumber(num) {
			return (num % 2 === 0) ? "偶数" : "奇数" ;
		},
		judgeGrade(grade) {
			return grade >= 90 ? "优秀" : grade >= 80 && grade < 90 ? "中等" : grade >= 70 && grade < 80 ? "及格" : "不及格" ;
		},
	};


  </script>
 </body>
</html>

-4). 某个公司要给员工发年终奖，为了奖励老员工，所以工作时间越长，发的越多，规则如下：

工作满 0 年,发月薪的 1 倍月薪年终奖，如果月薪大于 8000 ，那么就是发 1.2倍
工作满 1 年,发月薪的 1.5 倍月薪年终奖，如果月薪大于 10000 ，那么就是发 1.7倍
工作满 2 年甚至更多 ,发月薪的3 倍月薪年终奖，如果月薪大于 12000 ，那么就是发 3.2倍
编写JS程序，当用户输入自己的工作年限和薪资后，计算并且输出应得的年终奖~~

<!doctype html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
	html, 
	body {
		overflow: hidden;
		margin: 0;
		padding: 0;
		height: 100%;
		
	}
  </style>
 </head>
 <body>
	<input type="text" name="year" placeholder="year ...">
	<input type="text" name="salary" placeholder="salary ...">
	<button class="btn">验证</button>  
	
  <script type="text/javascript">
	
	// 获取目标元素(input[name=year])
	let oInput_year = document.querySelectorAll("[name=year]")[0];
	// 获取目标元素(input[name=salary])
	let oInput_salary = document.querySelectorAll("[name=salary]")[0];
	// 获取目标元素(.btn)
	let btn = document.querySelectorAll(".btn")[0];
	// 设定最高工作年限
	const MAX_WORK_YEAR = 100;
	// 为目标元素(.btn])绑定点击事件
	btn.addEventListener('click', function() {
		// 获取当前表单输入数据
		let year = oInput_year.value;
		let salary = oInput_salary.value;
		let money = 0;
		// 定义正则
		let reg = /^\d+$/;
		// 判断输出
		if(reg.test(year) && reg.test(salary)) {
			year = Number(year);
			salary = Number(salary);
			// 校验工作年限
			if(year < MAX_WORK_YEAR) {
				// 计算年终奖
				money = (year >= 0 && year < 1) ? util(salary, 8000, 1.2, 1) : (year >= 1 && year < 2)? util(salary, 10000, 1.7, 1.5) : (year >= 2) ? money = util(salary, 12000, 3.2, 2) : null ;
				
			}else {
				console.log("工作年限不切实际");
			}
		}else {
			console.log("输入有误");
		}
	
		console.log(`年终奖: ${ money }`);
	}, false);

	// 工具函数
	function util(salary, tag, max, min) {
	
		return (salary >= tag) ? salary * max : salary * min ;
	}

  </script>
 </body>
</html>

-5). 一个加油站为了鼓励车主多加油，所以加的多有优惠。

92 号汽油，每升 6 元；如果大于等于 20升，那么每升 5.9 元
97 号汽油，每升 7 元；如果大于等于 30升，那么每升 6.95 元
编写 JS 程序，用户输入自己的汽油编号，然后输入自己加多少升，计算并且输出应付价格~~


<!doctype html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
	html, 
	body {
		overflow: hidden;
		margin: 0;
		padding: 0;
		height: 100%;
		
	}
  </style>
 </head>
 <body>
	<input type="text" name="number" placeholder="汽油编号 ...">
	<input type="text" name="count" placeholder="加了...升">
	<button class="btn">验证</button>  
	
  <script type="text/javascript">
	
	// 获取目标元素(input[name=number])
	let oInput_number = document.querySelectorAll("[name=number]")[0];
	// 获取目标元素(input[name=count])
	let oInput_count = document.querySelectorAll("[name=count]")[0];
	// 获取目标元素(.btn)
	let btn = document.querySelectorAll(".btn")[0];
	// 设定最高汽油编号
	const GASOLINE_NUMBERS = [92, 97];
	// 为目标元素(.btn])绑定点击事件
	btn.addEventListener('click', function() {
		// 获取当前表单输入数据
		let number = oInput_number.value;
		let count = oInput_count.value;
		let money = 0;
		// 定义正则
		let reg = /^\d+$/;
		// 判断输出
		if(reg.test(number) && reg.test(count)) {
			number = Number(number);
			count = Number(count);
			// 校验汽油种类
			if(GASOLINE_NUMBERS.includes(number)) {
				// 计算最终油价
				money = number === 92 ? util(count, 20, 6, 5.9) : util(count, 30, 7, 6.95) ;
			}else {
				console.log("没有该种类型汽油");
			}
		}else {
			console.log("输入有误");
		}
	
		console.log(`最终油价: ${ money }`);
	}, false);

	// 工具函数
	function util(count, tag, max, min) {
	
		return (count >= tag) ? count * min : count * max;
	}

  </script>
 </body>
</html>

8. 扩展思考题（周五讲，提前思考一下）

已知下面代码可以修改BOX元素的样式

box.style.color = 'red';

那么下面的写法是否可以修改元素的样式，如果不可以是为什么？

//第一种方案
let AA = box.style;
AA.color = 'red';
​
//第二种方案
let BB = box.style.color;
BB = 'red';
​
//=>哪种方式可以实现，不能实现是因为啥？

=> 第一种可以实现, 第二种无法实现。
解析 : AA 存储与操作的是 box.style 的引用地址, 而 BB 存储与操作的是 box.style.color 所指的基本类型值。
图解 :
第一种 :
在这里插入图片描述
第二种:
在这里插入图片描述

萍果吮雨
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript编程基础练习题---干货分享
贪吃ღ大魔王
04-23 7550
文章目录一、js的基本类型1. 为抵抗洪水，战士连续作战89个小时，编辑计算共多少天零多少小时？2. 小明要到美国旅游，可是那里的温度是以华氏度为单位记录的，他需要一个程序将华氏度温度(80度)转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。(提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32) 保留3位小数)3. 705、816用js代码计算两个数字的个位、十位、百位相加的和二、逻辑分支、基础语句等1.输入一个月份返回这个月有多少天2.输入一个年份/月份/日期返回这个日期是这一
JavaScript 流程控制语句（if和switch）
weixin_64899102的博客
07-25 898
js中关于if和switch一些基础的概念和应用
web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 (1)
有问必答，欢迎打扰，项目开发，网页设计
06-18 301
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
加油问题
weixin_30420305的博客
01-25 1047
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html&gt...
if-else应用题
ssup的博客
01-02 1003
一些简单的if else应用题
用JavaScript实现，用户输入自己的汽油编号，然后输入自己加多少升，就弹出价格
狮子座的男孩
05-12 5631
Ⅰ、问题描述： 一个加油站为了鼓励车主多加油，出行优惠政策： 加的多有优惠： 92 号汽油，每升 6 元；如果大于等于 20 升，那么每升 5.9 元； 97 号汽油，每升 7 元；如果大于等于 30 升，那么每升 6.59元； 编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，就弹出价格； Ⅱ实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> <html lang="en"> <head> <m
课工场作业-js.zip
12-07
【课工场作业-js.zip】是一个包含多个JavaScript编程练习的压缩包，主要目的是帮助学习者提升JavaScript编程技能，尤其在网页交互和动态效果方面。这个压缩包中的四个练习项目覆盖了不同的JavaScript应用领域，让...
作业2.rar
11-09
很抱歉，根据您提供的信息，“作业2.rar”这个压缩包文件的标题和描述都只包含文件名本身，没有提供具体的IT知识点。标签为空，也无法提供额外的线索。压缩包内的子文件只有一个，同样名为“作业2”，这通常指的是...
day03-js高级作业.zip
10-01
【标题解析】: "day03-js高级作业.zip" 这个标题暗示了这是一个与JavaScript高级编程相关的学习资料，可能是某课程的第三天作业。"zip"格式表明它是一个压缩包，里面可能包含一系列的文件，如代码、文档或者测试案例...
基于JavaScript+鸿蒙系统开发的简单计算器软件源代码（课程大作业）.zip
最新发布
06-25
基于JavaScript+鸿蒙系统开发的简单计算器软件源代码（课程大作业）.zip 该项目属于个人毕业设计，经导师的精心指导与严格评审获得高分通过的设计项目。主要针对计算机相关专业的教师、正在做毕设、课设的学生使用，...
JS IF语句小问题记录
weixin_44966545的博客
07-10 732
学习JS的第三天，记录今天遇到的小问题： 练习： 92号汽油，每升6元；如果大于等于20升，那么每升5.9元； 97号汽油，每升7元；如果大于等于30升，那么每升6.95元； 输入一个油号，如果不是92或者97，提示“没有符合的型号，请重新输入”输入正确后，再输入多少升，计算后输出需要支付的金额。编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。 题目很容易主要其中出了一个小...
加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)
芝麻的博客
03-21 1852
加油站，为了鼓励车主多加油，实行多加多优惠政策，具体优惠如下： 已知92号汽油，每升6元；如果大于等于20升，那么每升5.9； 已知97号汽油，每升7元；如果大于等于40升，那么每升6.5 编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格
28 JS选择结构练习
Blog of Lytracy
09-13 1590
文章目录 基础语法练习
JavaScript作业1（实验1：Javascript基础语法）
CopyCatpuppet的博客
10-16 5000
1、判断今年是否闰年。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实验1：Javascript基础语法——是否闰年</title> </head&gt
JavaScript实验2
weixin_44788220的博客
06-27 4145
JavaScript实验2： 1.根据平均分来划分等级 2.加油优惠价格计算 3.输出100以内的所有质数 4：求圆的周长和面积 5：验证用户名和密码 6：打印九九乘法表 7：打印菱形，三角形 8：求红白黑球的个数
Javascript基础知识（二）
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
05-06 1488
1.if语句1.基本语法： if(条件表达式){ 条件为真的时候做的事情 }else{ 条件为假的时候做的事情5 }例： var a = 10; //设置变量 if(a > 5){ console.log("你好"); }else{
JavaScript(2)__Js基础<if swich while>
Richard_xx的博客
08-06 1107
1：条件控制语句 条件语句提供一种语法构造，只有满足某个条件，才会执行相应的语句。JavaScript提供if结构和switch结构，完成条件判断。 1：if语句：如果……那么……否则……             if(明天不下雨){                      我就出去玩； }else{      我就在家写作业; } 注意：条件表达式，要么是true、要么是f
03JavaScript程序设计修炼之道 2019-05-23_20-28-51_2019-05-26_21-12-07 for、练习、hw
weixin_30487317的博客
07-03 226
16for.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
如何结合工作年限和薪资来计算年终奖。
Ethan的技术分享
04-06 3609
某个公司要给员工发年终奖，为了奖励老员工，所以工作时间越长，发的越多，规则如下： 工作满0年  发月薪的1倍月薪年终奖，如果月薪大于8000，那么就是发1.2倍 工作满1年  发月薪的1.5倍月薪年终奖，如果月薪大于10000，那么就是发1.7倍 工作满2年，甚至更多 发月薪的3倍月薪年终奖，如果月薪大于12000，那么就是发3.2倍   用JS编写程序，让用户输入工作了几年，可以输入0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值