前端-JS基础-day2
目录
1、赋值运算符
2、自增运算符
3、比较运算符
4、逻辑运算符
5、用户输入案例
6、运算符的优先级
7、if单分支语句
8、if双分支语句
9、if多分支语句
10、三元运算符
11、数字补0案例
12、switch语句
13、简单计算器
14、while循环
15、案例-简易ATM取款机
1、赋值运算符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>赋值运算符</title>
</head>
<body><script>let num = 1// num = num + 1// 采用赋值运算符num += 1console.log(num)</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>自增运算符</title>
</head>
<body><script>// let num = 10// num = num + 1// num += 1// num++// 1、前置自增// let i = 1// ++i// console.log(i) // 2// 2、后置自增// let i = 1// i++// console.log(i) // 2// 区别对比// 前置自增// 先自增，后运算let i = 1console.log(++i + 1) // 3// 后置自增// 先运算，后自增let j = 1 console.log(j++ + 1) // 2</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>比较运算符</title>
</head>
<body><script>console.log(3 > 5);console.log(3 >= 3);console.log(2 == 2);// 比较运算符有隐式转换，把'2'转换为 2，双等号 只判断值console.log(2 == '2'); // true// === 全等 判断值和数据类型都一样才行console.log(2 === '2'); // falseconsole.log(2 !== '2'); // true// 以后判断是否相等，用 ===// NaN 不等于任何值，包括自己console.log(NaN === NaN); // falseconsole.log('-------------------');console.log('a' < 'b'); // trueconsole.log('aa' < 'ab'); // trueconsole.log('aa' < 'aac'); // trueconsole.log('-------------------');</script>
</body>
</html>4、逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>逻辑运算符</title>
</head>
<body><script>// 逻辑与 一假则假console.log(true && true);console.log(false && true);console.log(3 < 5 && 3 > 2);console.log(3 < 5 && 3 < 2);console.log('-----------------');// 逻辑或 一真则真console.log(true || true);console.log(false || true);console.log(false || false);console.log('-----------------');// 逻辑非 取反console.log(!true);console.log(!false);</script>
</body>
</html>5、用户输入案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户输入案例</title>
</head>
<body><script>// 1、用户输入let num = +prompt("请输入一个数字：")// 2、弹出结果alert(num % 4 === 0 && num % 100 !== 0)</script>
</body>
</html>6、运算符的优先级
7、if单分支语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>if单分支语句</title>
</head>
<body><script>// 单分支语句if(true){console.log("执行语句");}if(2 === '2'){console.log("执行语句");}// 除了 0 所有的数字都为真if(1){console.log("执行语句");}// 除了 '' 所有的字符串都为真if('pk'){console.log("执行语句");}</script>
</body>
</html>8、if双分支语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>if双分支语句</title>
</head>
<body><script>// 1、用户输入let uname = prompt("请输入用户名：")let pwd = prompt("请输入密码：")// 2、判断输出if(uname === 'pink' && pwd === '123456'){alert("登陆成功！")}else{alert("用户名或密码错误")}</script>
</body>
</html>9、if多分支语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>if多分支语句</title>
</head>
<body><script>// 输入let score = +prompt("请输入成绩：")// 判断if(score >= 90){alert("优秀")}else if(score >= 70){alert("良好")}else if(score >= 60){alert("及格")}else{alert("不及格")}</script>
</body>
</html>10、三元运算符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三元运算符</title>
</head>
<body><script>// 三元运算符// 条件 ? 代码1 : 代码2console.log(3 > 5 ? 3 : 5);// if(3 < 5){// alert("真的")// }else{// alert("假的")// }// 3 < 5 ? alert("真的") : alert("假的")let num = 3 < 5 ? 3 : 5console.log(num);</script>
</body>
</html>11、数字补0案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数字补0案例</title>
</head>
<body><script>// 1、用户输入let num = prompt("请输入一个数字：")// 2、判断输出，小于10补0num = num < 10 ? 0 + num : numalert(num)</script>
</body>
</html>12、switch语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>switch语句</title>
</head>
<body><script>switch(2){case 1:console.log('你选择的是1')break // 退出switchcase 2:console.log('你选择的是2')break // 退出switchcase 3:console.log('你选择的是3')break // 退出switchdefault:console.log('没有符合条件的')}</script>
</body>
</html>13、简单计算器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单计算器</title>
</head>
<body><script>// 1、用户输入 2个数字 + 操作符号 + - * /let num1 = +prompt("请输入第一个数字：")let num2 = +prompt("请输入第二个数字：")let sp = prompt("请输入 + - * /")// 2、输出判断switch(sp){case '+':alert(`两个数的加法操作是${num1 + num2}`)breakcase '-':alert(`两个数的减法操作是${num1 - num2}`)breakcase '*':alert(`两个数的乘法操作是${num1 * num2}`)breakcase '/':alert(`两个数的除法操作是${num1 / num2}`)break}</script>
</body>
</html>14、while循环
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>while循环</title>
</head>
<body><script>// 1、变量的起始值let i = 1// 2、终止条件while(i <= 3){document.write(`第${i}次<br>`)// 3、变量的变化量i++}</script>
</body>
</html>15、案例-简易ATM取款机
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易ATM取款机</title>
</head>
<body><script>// 1、开始循环，输入框写到循环里面// 3、准备一个总的金额let money = 100while(true){let re = +prompt(`请您选择操作：1、存钱2、取钱3、查看余额4、退出`)// 2、如果用户输入4，则退出循环if(re === 4){break}// 4、根据输入，进行操作switch(re){case 1:// 存钱let cun = +prompt("请输入存款金额：")money += cunbreakcase 2:// 存钱let qu = +prompt("请输入取款金额：")money -= qubreakcase 3:// 查看余额alert(`您的银行卡余额是${money}`)break}}</script>
</body>
</html>