1. 运算符
1.1 自增自减
<!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><script>// 单独使用时，前置++和后置++无差别，开发中一般单独使用// 参与运算时有差别，++i先自增再参与运算，i++先参与运算再自增// 1. 单独使用let i = 5let j = 5console.log(i, j); // 5 5i++++jconsole.log(i, j); // 6 6// 2. 参与运算时let a = i++let b = ++jconsole.log(a, b); // 6 7</script>
</body></html>1.2 比较运算符
<!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><!-- 比较运算符,返回值为布尔类型 true/false> 左边是否大于右边< 左边是否小于右边>= 左边是否大于或等于右边<= 左边是否小于或等于右边=== 左右两边是否类型和值都相等== 左右两边值是否相等!= 左右值不相等!== 左右两边是否不全等--><!-- 注意：= 赋值== 判断值是否相等=== 判断是否全等(值和数据类型)--><script>console.log(3 > 5); // fconsole.log(3 < 5); //tconsole.log(3 == '3'); //tconsole.log(3 === '3'); //fconsole.log(3 != '3'); //fconsole.log(3 !== '3'); //t</script>
</body></html>1.3 逻辑运算符
<!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><!-- 与&& 一假则假或|| 一真则真非！优先级为！&& ||--><script>// 逻辑中断/短路运算// && 遇到false 后面不继续执行console.log(3 > 5 && 5 < 10) //fconsole.log(0 && 10) //0console.log(1 && 10) //10// || 遇到true 后面不继续执行console.log(3 < 5 || 5 > 10) //tconsole.log(3 || 0) //3console.log(0 || 3) //3</script>
</body></html>案例1-判断数字
<!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><!-- 判断一个数是4的倍数，且不是100的倍数需求：用户输入一个，判断这个数是4的倍数，并且不是100的倍数，如果是则页面弹出true，否则弹出false--><script>let num = +prompt('请输入一个数字')alert(num % 4 === 0 && num % 100 !== 0)</script>
</body></html>1.4 运算符优先级
2. 数据类型转换
2.1 转数字型
<!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><!-- 为什么需要类型转换？使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算--><!-- 1. 显式转换(明确) 程序员写代码转换2. 隐式转换(不明确) 某些运算符被执行时，系统内部自动将数据类型进行转换--><script>// 1. 字符串转数字let str1 = '1.1'let str2 = '1.9'let str3 = '1.9aa'let str4 = 'jqk111'// 保留小数转换 parseFloatconsole.log(parseFloat(str1)) // 1.1console.log(parseFloat(str2)) // 1.9console.log(parseFloat(str3)) // 1.9console.log(parseFloat(str4)) // NaN// 取整转换 parseIntconsole.log(parseInt(str1)) // 1console.log(parseInt(str2)) // 1console.log(parseInt(str3)) // 1console.log(parseInt(str4)) // NaN// Numberconsole.log(typeof Number(str1)) // numberconsole.log(Number(str2)) // 1.9console.log(Number(str3)) // NaN 不是一个数字// 2. 布尔型转数字console.log(Number(true)); // 1console.log(Number(false)); // 0// 3. undefinedconsole.log(Number(undefined)); // NaN// 4. nullconsole.log(Number(null)); // 0</script>
</body></html>2.2 转字符串型
<!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><!-- 数字转字符串 --><script>let num1 = 1.1let num2 = 1.9let num3 = 2let num4 = 1.95// 1. Stringconsole.log(String(num1)) // 1.1console.log(typeof String(num1)) // string// 2. toString(进制)console.log(num1.toString()) // 1.1console.log(num2.toString()) // 1.9console.log(num3.toString()) // 2console.log(num3.toString(2)) // 10// 3. toFixed(保留小数位数) 默认不保留 四舍五入console.log(num1.toFixed()) // 1console.log(num2.toFixed()) // 2console.log(num3.toFixed()) // 2console.log(num4.toFixed()) // 2console.log(num1.toFixed(1)) // 1.1console.log(num2.toFixed(1)) // 1.9console.log(num3.toFixed(1)) // 2.0console.log(num4.toFixed(1)) // 1.9console.log(num4.toFixed(2)) // 1.95</script>
</body></html>2.3 转布尔型
<!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><!-- 转布尔型 --><script>//不正常的数据转为false，其他的转为trueconsole.log(Boolean(0)) // fconsole.log(Boolean(NaN)) // fconsole.log(Boolean(undefined)) // fconsole.log(Boolean(123)) // tconsole.log(Boolean('123')) // t</script>
</body></html>2.4 隐式转换
<!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><!-- 隐式转换 系统内部自动转换（鸿蒙中无 → 强类型语言） --><script>// 1. 转字符串 +字符串拼接console.log('1' + 2); // 字符串12// 2. 转为数字型 - * / % > ==等 , 字符串前'+'(正号)转为数字console.log(+('1' + 2)) // 数字12console.log('10' - '5') // 数字5console.log('10' * '5') // 数字50console.log('3' < '5') // true// 3. 转布尔型console.log(!0) // true</script>
</body></html>3. 语句
3.1 if语句
单分支、双分支、多分支
<!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><!-- 表达式和语句：表达式：可以被求值的代码，并将其计算出一个结果语句：一段可以执行的代码，是一个行为（如分支语句和循环语句）--><!-- 程序三大流程控制语句：顺序结构、分支结构(选择执行)、循环结构(重复执行)--><script>let age = prompt('请输入您的年龄')if (age >= 18) {alert('允许进入网吧')} else {alert('未成年禁止进入网吧游玩')}</script>
</body></html>案例2-简易版登录
<!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><!-- 判断用户登录案例需求：用户输入，用户名：刘德华，密码：123456，则提示登录成功，否则提示登录失败--><script>// 1. 用户输入let uname = prompt('请输入您的用户名')let password = prompt('请输入您的密码')// 2. 程序判断if (uname === '刘德华' && password === '123456') {alert('哦耶！登陆成功')} else {alert(`sorry~登陆失败用户名或密码错误`)}</script>
</body></html>案例3-成绩评语
<!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><!-- 输入成绩输出评语案例需求：根据输入不同的成绩，反馈不同的评价注：①：成绩90以上是 优秀②：成绩70~90是 良好③：成绩是60~70之间是 及格④：成绩60分以下是 不及格--><script>let score = prompt('请输入您的成绩')if (score >= 90) {alert('优秀')} else if (score >= 70) {alert('良好')} else if (score >= 60) {alert('及格')} else {alert('不及格(っ °Д °;)っ')}</script>
</body></html>3.2 三元运算符
<!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><!-- 简单双分支，可以使用三元运算符，写起来比if简单--><script>// 用户输入2个数，页面弹出最大的值let num1 = prompt('请输入数字1')let num2 = prompt('请输入数字2')alert(`较大值为${num1 > num2 ? num1 : num2}`)</script>
</body></html>案例4-数字补0
<!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><!-- 用户输入1个数，如果数字小于10，则前面进行补0，比如0903等--><script>let num = prompt('请输入数字：')alert(num < 10 ? '0' + num : num)</script>
</body></html>3.3 switch语句
<!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><!-- switch 用于判断全等===找到跟小括号里数据全等的case值，并执行里面对应的代码若没有全等 === 的则执行default里的代码1. switch case语句一般用于等值判断, if 适合于区间判断2. switch case一般需要配合break关键字使用 没有break会造成case穿透3. if 多分支语句开发要比switch更重要，使用也更多--><script>let fruit = prompt('请输入要查找的水果:')switch (fruit) {case '苹果':alert('苹果2块钱一斤')breakcase '香蕉':alert('香蕉3块钱一斤')breakcase '榴莲':alert('榴莲4块钱一斤')breakdefault:alert('没有您要找的水果')}</script>
</body></html>3.4 while循环
<!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><script>// 循环三要素：初始值 条件 变化量(控制循环的次数)let i = 1while (i <= 3) {document.write(`第${i}次循环<br>`)i++}</script>
</body></html>案例5-输出1-100及其累加和
<!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><p></p><script>// 输出1-100let i = 1while (i <= 100) {// 控制台输出// console.log(i)// 只有一个选择器→输出被覆盖// document.querySelector('p').innerHTML = i // 100document.querySelector('p').innerHTML += i //12345678910...i++}// 输出1-100之间的偶数let j = 1while (j <= 100) {if (j % 2 === 0) {document.write(j + '<br>')}j++}</script>
</body></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><script>// 1-100累加和/* let i = 1let sum = 0while (i <= 100) {sum += ii++}document.write(`1-100累加和为${sum}`) */// 1-100偶数累加和let i = 1let sum = 0while (i <= 100) {if (i % 2 === 0) {sum += i}i++}document.write(`1-100偶数累加和为${sum}`)</script>
</body></html>3.5 for循环
<!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><!-- for循环好处：把声明初始值、循环条件、变量计数写到一起，让人一目了然是最常使用的循环形式--><!-- for（初始值;循环条件;变量计数）{//满足条件执行的循环体}--><script>// for 1-100累加和/* let sum = 0 不能放到循环体内若放到{}内会每次都重置为0，达不到累加效果 *//* for循环()内已写变量计数i++，{}内不需再写，与while不同*/let sum = 0for (let i = 1; i <= 100; i++) {sum += i}document.write(sum)</script>
</body></html>3.6 循环中断
<!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><!-- 1. 中止循环break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率） continue 中止本次循环，一般用于排除或者跳过某一个选项的时候2. 无限循环while(true) 来构造“无限”循环，需要使用break退出循环。for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环--><script>// 吃五个苹果 假设第三个有虫子for (let i = 1; i <= 5; i++) {document.write(`正在吃第${i}个苹果<br>`)if (i === 3) {document.write(`有虫子，不吃辣（＞人＜；）<br>`)break // 退出整个循环// continue // 退出当前循环}}</script>
</body></html>案例6-简易ATM存取款机
<!DOCTYPE html>
<html lang="en"><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>综合案例-ATM存取款机</title><link rel="stylesheet" href="./css/alert.css">
</head><body><div role="alert" class="el-alert"><span class="el-alert__title" id="title"> 文字内容： </span></div><!-- 秋姐课上方法 --><script>let balance = 5000for (; ;) {let num = +prompt(`请选择您的操作：1. 取款2. 存款3. 查看余额4. 退出系统`)if (num === 1) {let qu = +prompt('取出金额为：')balance -= qualert(`已成功取出${qu}元，卡内现有余额为${balance}`)} else if (num === 2) {let cun = +prompt('存入金额为：')balance += cunalert(`已成功存入${cun}元，卡内现有余额为${balance}`)} else if (num === 3) {alert(`卡内现有余额为${balance}`)} else if (num === 4) {alert('退出系统')document.querySelector('.el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`break} else {alert('请输入上述操作中所对应的数字')}}</script><!-- 自做 --><!-- <script>// 死循环// while(true){}// for(;;){}// 卡内原有金额let balance = 3000for (; ;) {let num = +prompt(`请选择您的操作：1. 取款2. 存款3. 查看余额4. 退出系统`)if (num === 4) {// 此次练习中的错误 使用类选择器时类名前要加. 如.el-alert__titledocument.querySelector('.el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`break}switch (num) {case 1:let qu = +prompt('取出金额为：')balance -= qualert(`已成功取出${qu}元，卡内现有余额为${balance}`)breakcase 2:let cun = +prompt('存入金额为：')balance += cunalert(`已成功存入${cun}元，卡内现有余额为${balance}`)breakcase 3:alert(`卡内现有余额为${balance}`)breakdefault:alert('请输入上述操作中所对应的数字')}}</script> --><!-- <script>// 死循环// while(true){}// for(;;){}// 卡内原有金额let balance = 3000for (; ;) {let num = +prompt(`请选择您的操作：1. 取款2. 存款3. 查看余额4. 退出系统`)switch (num) {case 1:let qu = +prompt('取出金额为：')balance -= qualert(`已成功取出${qu}元，卡内现有余额为${balance}`)breakcase 2:let cun = +prompt('存入金额为：')balance += cunalert(`已成功存入${cun}元，卡内现有余额为${balance}`)breakcase 3:alert(`卡内现有余额为${balance}`)breakcase 4:document.querySelector('.el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`breakdefault:alert('请输入上述操作中所对应的数字')}if (num === 4) {// document.querySelector('el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`break}}</script> -->
</body></html>4. 作业
4.1 三个数中最大值
<!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><!-- 创建三个变量，保存三个数字，然后比较三个数的最大值--><script>let num1 = prompt('请输入数字1')let num2 = prompt('请输入数字2')let num3 = prompt('请输入数字3')alert(`这三个数中最大值为：${(num1 > num2 ? num1 : num2) > num3 ? (num1 > num2 ? num1 : num2) : num3}`)</script>
</body></html>4.2 判断时间阶段
<!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><!-- 判断时间阶段。比如: 用户输入12点 弹出中午好用户输入18点 弹出傍晚好 用户输入23点 弹出深夜好--><script>let time = +prompt('请输入几点？（12/18/23）')if (time === 12) {alert('中午好！')} else if (time === 18) {alert('傍晚好！')} else if (time === 23) {alert('深夜好！')} </script>
</body></html>4.3 判断奇数偶数
<!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><!-- 用户输入一个数，来判断是奇数还是偶数(能被2整除的数是偶数） --><script>let num = +prompt('请输入数字：')if (num) {if (num % 2 === 0) {alert(`${num}是偶数`)} else {alert(`${num}是奇数`)}} else {alert('请输入非零数字哦')}</script>
</body></html>4.4 抽奖活动
<!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><!-- 抽奖活动 幸运数字是6用户有三次机会三次之内输入6 则提示恭喜中奖 不再弹出三次都没成功 则失败--><script>for (let i = 1; i <= 3; i++) {let num = +prompt('请输入抽奖数字：')if (num === 6) {alert('恭喜中奖！！！')break}}</script>
</body></html>4.5 星期几
<!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><!-- 根据用户输入的数值(数字1到数字7），返回星期几(用switch) --><script>let num = +prompt('请输入一位1-7之间的数字')switch (num) {case 1:alert('星期一')breakcase 2:alert('星期二')breakcase 3:alert('星期三')breakcase 4:alert('星期四')breakcase 5:alert('星期五')breakcase 6:alert('星期六')breakcase 7:alert('星期日')break}</script>
</body></html>4.6 存取款机
<!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><!-- 存取款机:用户卡里有100元弹出输入框 当用户输入数字1存钱: 再弹出输入框 输入存款金额 alert(显示余额)2取钱：用余额－取款金额 如果小于0则提示用户"哥没了～＂反之则正常相减再显示余额--><script>let money = 100let num = +prompt(`请选择您的操作：1. 存钱2. 取钱`)switch (num) {case 1:let cun = +prompt('请输入存款金额')alert(`银行卡余额为${money + cun}`)breakcase 2:let qu = +prompt('请输入取款金额')if (money - qu < 0) {alert('滴滴--- 您卡内余额不足～ 取款失败')} else {alert(`银行卡余额为${money - qu}`)}breakdefault:alert('请输入上述所提示的正确操作数字')}</script>
</body></html>
![[CKS] K8S NetworkPolicy Set Up](https://i-blog.csdnimg.cn/direct/0ce54f17b65a4399a1976f76562862a1.png)
