JavaScript | 流程控制练习
122
2024-03-18
⭐️ 有关JavaScript- 流程控制小练习
>if-else语句练习
prompt() 可以用来获取用户输入的内容
//它会将用户输入的内容以字符串的形式返回，可以通过变量来接收
parseInt()将一个字符串转换为一个整数
//它会自左向右读取一个字符串，直到读取到字符串中所有的有效的整数
练习1：
编写一个程序，获取一个用户输入的整数。通过程序显示这个数是奇数还是偶数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if-else练习1</title>
<script>
// 编写一段指令，并获取一个用户输入的整数
let num = +prompt("请输入一个整数")
// 使用 parseInt来对数字取整
// let num = parseInt(prompt("请输入一个整数"))
// 验证一下，用户的输入是否合法，只有是有效数字时候，才检查是否为偶数
// 注意，这不能使用 ==相等运算符 或 ===全等运算符 来检查一个值是否为 NaN
// 可以使用 isNaN()函数来检查一个值是否为 NaN
// 如果为 NaN ，则不执行后续操作，||或 数字模以1 !==不全等 为0，则不执行后续操作
if (isNaN(num) || num % 1 !== 0) {
alert("你的输入有问题，请输入整数！")
} else {
// 通过这一段指令，显示这个数是基数还是偶数
// 在这里使用 % 模运算符
if (num % 2 === 0){
alert(`${num} 是偶数!` )
}else{
alert(`${num} 是奇数！`)
}
}
// 可以通过嵌套关系，使其返回 NaN 重新操作！
</script>
</head>
<body>
</body>
</html>
练习2：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if-else练习2</title>
<script>
// 从键盘输入小明的期末成绩:
// 这里使用 score得分 来赋值
let score = +prompt("请输入小明的期末成绩")
// 检查score是否合法
// score必须为数字，或 小于0 或 大于100
if(isNaN(score) || score<0 || score>100 ){
alert( `请输入一个合法的分数`)
}else{
// 当成绩为100时，奖励一辆BMW
// 使用 ===全等运算符 比较分数是否相等
if(score === 100){
alert(`奖励BMW一辆`)
}else if(score >=80){
// 当成绩为[80-99]时，奖励一台iPhone
// 分数大于且等于80，区间上限为99
alert(`手机一台`)
}else if(score >= 60){
// 当成绩为[60-79]时，奖励一本参考书
alert(`奖励参考书一本`)
}else{
// 其他时，什么奖励也没有
// 不在以上区间时，执行最后一步
alert(`什么也没有`)
}
}
</script>
</head>
<body>
</body>
</html>
练习3：
大家都知道，男大当婚，女大当嫁。那么女方家长要嫁女儿，当然要提出一定的条件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if-else练习3：</title>
<script>
// 获取男生的数据（身高、财富、颜值）
let height = +prompt(`请输入你的身高（厘米）`)
let money = +prompt(`请输入你的身价（万）`)
let face = +prompt(`请输入你的颜值（像素）`)
// 检查输入是否为有效数字
// 如果失败则提示重新输入，验证成功则显示用户数据
if (isNaN(height)|| isNaN(money) || isNaN(face)) {
alert("请输入有效数字！")
}else {
// 显示用户输入数据
// 在这里`--`为连接符
alert(height + `--`+ money + `--`+ face)
}if(height>180 && money>1000 && face>500) {
alert(`我一定要嫁给他！！！`)
}else if(height>180 || money>1000 || face>500) {
alert(`嫁吧，比上不足，比下有余~`)
}else {
alert(`不嫁！`)
}
</script>
</head>
<body>
</body>
</html>>while语句练习
练习1：
假设银行存款的年利率为5%，问1000块存多少年可以变成5000块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while练习1</title>
<script>
// 创建一个变量表示钱数
let money = 1000
// 1000存一年是多少钱？
/* 需要赋值给 money 以便更新
money = money * 0.05 + money
money *= 1.05
*/
// 创建一个计数器来记录循环执行的次数
let year = 0
// 编写循环，计算存款的年数
while(money < 5000){
money *= 1.05 // 循环每执行一次，就相当于存了一年
year++
}
console.log(`需要存${year}年，最终的钱数是${money})元!`);
</script>
</head>
<body>
</body>
</html>>for语句练习
练习1：
求100以内所有3的倍数（求它们个数和总和）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for语句练习1</title>
<script>
// 求100以内所有3的倍数（求它们个数和总和）
let count = 0 // 计数器
let result = 0 // 用来存储计算结果（累加结果）
// 求100以内所有的数
// for(let i=1; i<=100; i++){
// 获取3的倍数
// if(i % 3 === 0){
// count++
// resule = result + i
// 更棒的简写方法：
// result += i
// }
// }
for(let i=3; i<=100; i+=3){
count++
result += i
}
console.log(`3的倍数一共有${count}个，总和为${result}`)
</script>
</head>
<body>
</body>
</html>
练习2：
求 1000 以内的水仙花数
一个n位数（n >= 3），如果它各个位上数字的n次幂之和还等于这个数，那么这个数就是一个水仙花数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for语句练习2</title>
<script>
// 第一种思路：
// 获取所有的三位数
for(let i=100; i<1000; i++){
// 判断i是否是水仙花
// 如果i的百位数字 十位数字 个位数字的立方和 还等于i，则i就是水仙花数
let bai = parseInt(i / 100)
// 获取一个十位数
let shi =parseInt((i- bai * 100)/ 10)
// 获取一个个位数
let ge = i % 10
console.log(i,"-->",bai,shi,ge);
// 判断i是否是水仙花数
if(bai**3 + shi**3 + ge**3 === i)
console.log(i);
}
// 第二种思路：
// 通过索引去操作字符：
/* let a = `hello`
a[0] = h
a[1] = e
a[2] = l
a[3] = l
a[4] = 0
*/
for(let i=100; i<1000; i++){
// 创建新的变量strI，防覆写i
let strI = i + ""
if(strI[0] ** 3 + strI[1] ** 3 + strI[2] ** 3 === i){
console.log(i)
}
}
</script>
</head>
<body>
</body>
</html>
练习3：
获取用户输入的大于1的整数（暂时不考虑输错的情况）
然后编写代码检查这个数字是否是质数，并打印结果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for语句练习3</title>
<script>
// 获取用户输入的数值
let num = +prompt(`请输入一个大于1的整数！`)
// 编写代码检查 9是否为质数
/* 检查num有没有除1和9以外的其它因数
-如果有，说明num不是质数
-如果没有，说明num是质数
获取所有可能整数9的数（1-9）
2 3 4 5 6 7 8 9
检查这一堆数中是否有能整除9的数
let flag = true
for(let i=2; i<9; i++){
if(9 % i ===0){
// 如果9能够被i整除，说明9一定不是质数
// 当循环执行时，如果代码没有执行，则说明9是质数，反之则一定不是。
flag = false
}
}
if(flag){
alert(`9是质数`)
}else{
alert(`9不是质数`)
}
*/
// 创建变量，用来记录num的状态,默认是true，num是质数。
let flag = true
for(let i=2; i<num; i++){
if(num % i ===0){
// 如果num能够被i整除，说明num一定不是质数
// 当循环执行时，如果代码没有执行，则说明num是质数，反之则一定不是。
flag = false
}
}
if(flag){
alert(`${num}是质数`)
}else{
alert(`${num}不是质数`)
}
</script>
</head>
<body>
</body>
</html>>嵌套循环练习
练习1：
在网页中打印99乘法表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套练习1</title>
<script>
// 创建一个外层循环，控制图形高度
for (let i = 1; i <= 9; i++) {
// 创建内层循环控制图形的宽度
for (let j = 1; j < i + 1; j++) {
document.write(`<span>${j} × ${i} = ${i*j}</span>`)
}
// 打印换行
document.write("<br>")
}
</script>
</head>
<body>
</body>
</html>
练习2：
编写代码，求100以内所有的质数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套练习2</title>
<script>
for(let i=2; i<100; i++){
// 检查i是否是质数，是质数则输出
// 创建一个变量，记录i的状态，默认i是质数
let flag = true
// 获取 1-i 之间的数
for(let j=2; j<i; j++){
// 判断i能不能被j整除
if(i % j === 0){
// 进入判断，说明i不是质数，修改flag为false
flag = false
}
}
// 判断结果
if(flag){
console.log(i)
}
}
</script>
</head>
<body>
</body>
</html>
>代码优化练习
第一次优化
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第一次优化</title>
<script>
/*
优化前
1. 10000以内：290ms
2. 100000以内：28202ms
第一次优化：
1. 10000以内：30ms
2. 100000以内：2331ms
问题：如何修改代码，提升其性能
*/
// 开始一个计时器
console.time('质数练习')
for (let i = 2; i < 1000000; i++) {
let flag = true
for (let j = 2; j < i; j++) {
if (i % j === 0) {
flag = false
// 进入判断说明i一定不是质数，后续检查没有执行的必要
break
}
}
if (flag) {
//console.log(i)
}
}
// 停止计时器
console.timeEnd('质数练习')
</script>
</head>
<body></body>
</html>
第二次优化
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第二次优化</title>
<script>
/*
优化前
1. 10000以内：290ms
2. 100000以内：28202ms
第一次优化：
1. 10000以内：30ms
2. 100000以内：2331ms
3. 1000000以内：192003ms
第二次优化：
1. 10000以内：3ms
2. 100000以内：20ms
3. 1000000以内：394ms
问题：如何修改代码，提升其性能
36
1 36
2 18
3 12
4 9
6 6
*/
// 开始一个计时器
console.time('质数练习')
for (let i = 2; i < 1000000; i++) {
let flag = true
for (let j = 2; j <= i ** .5; j++) {
if (i % j === 0) {
flag = false
// 进入判断说明i一定不是质数，后续检查没有执行的必要
break
}
}
if (flag) {
// console.log(i)
}
}
// 停止计时器
console.timeEnd('质数练习')
</script>
</head>
<body></body>
</html>
- 2
-
分享