一、类型转换
1.为什么要类型转换
2.隐式转换
代码
<!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> 隐式转换</title>
</head>
<body>
<script>
console.log(1 + 1)
console.log('pink' + 1)
console.log(2 + 2)
console.log(2 + '2')
console.log(2 - 2)
console.log(2 - '2')
// 加号的一个用途：转换为数字型
console.log(+12)
console.log(+'123')
</script>
</body>
</html>
3.显示转换
代码
<!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>显示转换</title>
<style>
.box {
/* 有px不能加减 这时候parseInt/parseFloat就发挥作用了 */
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<script>
let str = '123'
// 注意Number首字母是大写 js严格区分大小写
console.log(Number(str))
console.log(Number('black')) //NaN 不能乱来 black本身就不是一个数字类型
// 发现输入的数字 检测出来是字符串类型(默认的) 所以需要类型转换
let num1 = prompt('请输入第一个数：')
console.log(typeof num1)
console.log(1000 + 200);
//不是黑色是蓝色 number型
let num = prompt('输入年薪：')
console.log(Number(num))
// 也可以这样写/8
let num2 = Number(prompt('输入年薪：'))
console.log(num2)
// 隐式转换写法
let num3 = +prompt('输入年薪：')
console.log(num3)
// 只保留整数
console.log(parseInt('12px'))
console.log(parseInt('12.34px'))
console.log(parseInt('12.94px'))
// 数字放中间是取不到的
console.log(parseInt('abcd12.94px')) //NaN
//-----------------------
// 可以保留小数
console.log(parseFloat('12px'))
console.log(parseFloat('12.34px'))
console.log(parseFloat('12.94px'))
// 数字放中间是取不到的
console.log(parseFloat('abcd12.94px')) //NaN
</script>
</body>
</html>
鼠标放到变量名上面vscode会自动提示是什么类型，可以不用typeof去测
代码
<!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>求和案例</title>
</head>
<body>
<script>
// 1. 用户输入 prompt得到的是字符串类型 要转换为数字型
let num1 = +prompt('请输入第一个数字：')
let num2 = +prompt('请输入第二个数字：')
// 2. 输出
// alert(num1 + num2)
alert(`两个数相加的和是:${num1 + num2}`)
</script>
</body>
</html>
二、实战案例
代码
<!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>综合案例-渲染表格案例</title>
<style>
h2 {
text-align: center;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
// 1. 用户输入
let price = +prompt('请输入商品价格：')
let num = +prompt('请输入商品数量：')
let address = prompt('请输入收货地址：')
// 2. 计算总额
let total = price * num
// 3. 页面打印渲染
// 反引号是支持换行的
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}</td>
<td>${num}</td>
<td>${total}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
三、常见错误
1.
2.
3.
4.
5.
四、运算符
1.赋值运算符
代码
<!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>赋值运算符</title>
</head>
<body>
<script>
let num = 1
// num = num + 1
// 简化写法：采用赋值运算符
// num += 1
num += 3
console.log(num)
</script>
</body>
</html>
2.一元运算符
代码
<!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>一元运算符</title>
</head>
<body>
<script>
// 1. 前置自增
/* let i = 1
++i
console.log(i) */
// 2. 后置自增
/* let i = 1
i++
console.log(i) */
// 3. 前置自增和后置自增区别
// (1)前置自增
/* let i = 1
console.log(++i + 1) */
// (2)后置自增
// 先运算再加1
/* let i = 1
console.log(i++ + 1) */
// 了解
let i = 1
// 1 + 3 + 3
console.log(i++ + ++i + i)
</script>
</body>
</html>
3.比较运算符
一般情况下，我们小数参与运算，先把小数转换成整数进行运算，因为小数会有精度问题
代码
<!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>比较运算符</title>
</head>
<body>
<script>
console.log(3 > 5)
console.log(3 >= 3)
console.log(3 == 3)
// 比较运算符也有隐式转换 它会把字符型和其它型转换成数字型 因为只有数字才能比较
// 双等号只判断值
console.log(3 == '3')
// === 全等 值和数据类型都一样才行
console.log(3 === '3')
// 以后判断是否相等 请用===
console.log(undefined == null)
console.log(undefined === null)
// 特殊：NaN不等于任何一个值 包括它自己
console.log(NaN === NaN)
// 一个数字型一个字符型
console.log(2 != '2')
// 字符串比较 是比较的字符对应的ASCII码
console.log('a' > 'b')
// 它们比较的规则：先比较第一个字符 如果第一个字符相等 就比较第二个字符
console.log('aa' < 'ab')
// 前面两个相等 后面一个有的前面一个没有
console.log('aa' < 'aac') //true
console.log('老' > '师')
</script>
</body>
</html>
4.逻辑运算符
代码
<!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>逻辑运算符</title>
</head>
<body>
<script>
// 逻辑与 一假则假
console.log(true && true)
console.log(false && true)
console.log(3 < 5 && 3 > 2)
console.log(3 < 1 && 29 < 4)
console.log('-------------')
// 逻辑或 一真则真
console.log(true || true)
console.log(false || true)
console.log(false || false)
console.log('-------------')
// 逻辑非(一元运算符 因为它只需要一个操作数) 取反
console.log(!true)
console.log(!false)
console.log('--------------')
let num = 2
console.log(num > 6 && num < 7)
</script>
</body>
</html>
代码
<!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>用户输入案例</title>
</head>
<body>
<script>
// 1. 用户输入
let num = +prompt('请输入一个数字：')
// 2. 弹出结果
alert(num % 4 === 0 && num % 100 !== 0)
</script>
</body>
</html>
5.运算符优先级
五、表达式和语句
六、分支语句
（1）分支语句
if单分支语句
代码
<!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>if单分支语句</title>
</head>
<body>
<script>
// if (true)
if (false) {
console.log('执行语句')
}
if (2 === '2') {
console.log('执行')
}
// 除了0 所有的数字都为真
if (3) {
console.log('blabla')
}
// 除了空字符串 所偶的字符串都为真
if ('桃红柳绿') {
console.log('春天来了')
}
if ('') {
console.log('春天来了')
}
// 如果大括号只有一个语句 大括号可以省略 但是不提倡
if (9) console.log(199)
console.log('------------------------')
// 单分支课堂案例1
// 1. 用户输入
let score = +prompt('请输入成绩')
// 2. 进行判断输出
if (score >= 700) {
alert('恭喜考入黑马程序员')
}
</script>
</body>
</html>
if双分支语句
代码
<!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>if双分支语句</title>
</head>
<body>
<script>
// 1. 用户输入
let uname = prompt('请输入用户名：')
// 密码，手机号码等是属于字符串的
let pwd = prompt('请输入密码：')
// 2. 判断输出
// 这里一定要注意：输入的密码是字符串型的，那么密码也得是字符串型的，不然永远都不对 所以这里的123456要加 ''
if (uname === 'black' && pwd === '123456') {
alert('恭喜登陆成功')
} else {
alert('用户名或者密码错误')
}
</script>
</body>
</html>
代码
<!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>判断闰年案例</title>
</head>
<body>
<script>
// 1. 用户输入
let year = +prompt('请输入年份')
// 2. 判断输出
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${year}是闰年`)
} else {
alert(`${year}是平年`)
}
</script>
</body>
</html>
if多分支语句
代码
<!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>判断成绩</title>
</head>
<body>
<script>
// 1. 用户输入
let score = +prompt('请输入成绩：')
// 2. 判断输出
// 进行到>=70已经是90分以下的了，所以不用写<90
if (score >= 90) {
alert('成绩优秀，宝贝，你是我的骄傲')
} else if (score >= 70) {
alert('成绩良好，宝贝，你要加油哦~~')
} else if (score >= 60) {
alert('成绩及格，宝贝，你很危险~')
} else {
alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话')
}
</script>
</body>
</html>
三元运算符
代码
<!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>三元运算符</title>
</head>
<body>
<script>
// 三元运算符
// 条件 ? 代码1 ：代码2
// 真返回3 假返回5
console.log(3 > 5 ? 3 : 5)
/* if (3 > 5) {
alert('真的')
} else {
alert('假的')
} */
3 > 5 ? alert('真的') : alert('假的')
let sum = 3 > 5 ? 3 : 5
console.log(sum)
</script>
</body>
</html>
表达式与语句最大的区别在于表达式可以取值
代码
<!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>判断2个数的最大值</title>
</head>
<body>
<script>
// 1. 用户输入
let num1 = +prompt('请您输入第一个数：')
let num2 = +prompt('请您输入第二个数：')
// 2. 判断输出-用三元运算符更简洁
/* if (num1 > num2) {
alert(num1)
} else {
alert(num2)
} */
num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)
</script>
</body>
</html>
代码
<!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>数字补0案例</title>
</head>
<body>
<script>
// 1. 用户输入
// let num = +prompt('请您输入一个数字：')
// 2. 判断输出-小于10才补0
// num < 10 ? alert('0' + num) : alert(num)
// 或者去掉+
// let num2 = prompt('请您输入一个数字：')
// num2 < 10 ? alert(0 + num2) : alert(num2)
let num3 = prompt('请您输入一个数字：')
num3 = num3 < 10 ? 0 + num3 : num3
alert(num3)
</script>
</body>
</html>
switch语句
代码
<!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>switch选择语句</title>
</head>
<body>
<script>
switch (1) {
case 1:
console.log('您选择的是1')
// 要是没有break 就会出现穿透
break //退出switch
case 2:
console.log('您选择的是2')
break
case 3:
console.log('您选择的是3')
break
default:
console.log('没有符合条件的')
}
</script>
</body>
</html>
代码
<!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>简单计算器</title>
</head>
<body>
<script>
// 1. 用户输入 2个数字+操作符号 + - * /
let num1 = +prompt('请您输入第一个数字:')
let num2 = +prompt('请您输入第二个数字:')
let sp = prompt('请您输入 + - * / 其中一个：')
// 2. 判断输出
switch (sp) {
case '+':
alert(`两个数的加法操作是${num1 + num2}`)
break
case '-':
alert(`两个数的减法操作是${num1 - num2}`)
break
case '*':
alert(`两个数的乘法操作是${num1 * num2}`)
case '/':
alert(`两个数的除法操作是${num1 / num2}`)
break
// 这一句可以不要
default:
alert(`你干啥咧，请输入+-*/`)
}
</script>
</body>
</html>
七、循环语句
在js中语句分为顺序语句、分支语句、循环语句
（1）断点调试
代码
<!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>断点调试</title>
</head>
<body>
<script>
let num = 9
num = num + 1
console.log(num)
</script>
</body>
</html>
（2）while循环
while循环基本语法
while循环三要素
ctrl+alt+delete键→任务管理器 右击结束任务
代码
###### 代码
```html
<!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>while循环</title>
</head>
<body>
<script>
// 1. 变量的起始值
// let i = 1
// 2. 终止条件
// while (i <= 3) {
// document.write('我要循环三次 <br>')
// 没有变量的变化量，就会出现死循环
// 3. 变量的变化量
// i++
// }
// 1. 变量的起始值
let end = +prompt('请输入次数：')
let i = 1
// 2. 终止条件
while (i <= end) {
// 不加<br>就不会换行
document.write('我要循环')
// 3. 变量的变化量
i++
}
</script>
</body>
</html>
代码
<!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>循环大练习</title>
</head>
<body>
<script>
// 1. 页面输出1~100
/* let i = 1
while (i <= 100) {
document.write(i + '<br>')
document.write(`这是第${i}个数<br>`)
i++
} */
// 2. 页面输出1~100累加和
// let i = 1 //变量的起始值
// let sum = 0 //累加和变量
// while (i <= 100) {
// sum = sum + i
// sum += i
// i++
// }
// 因为我们求的总和 所以我们要在整个循环结束的时候再打印输出
// console.log(sum) //5050
// 3. 页面输出1~100的偶数和
let i = 1
let sum = 0
while (i <= 100) {
// 筛选偶数
// if (i % 2 !== 0) { 就是奇数
if (i % 2 === 0) {
sum = sum + i
}
// 这个i++不能写到if里面去了 因为i每次循环都需要自增 而不是只有是偶数的时候才自增
i++
}
console.log(sum)
</script>
</body>
</html>
break可以用于遍历数组，当我们找到那个数组之后就可以退出循环了
代码
<!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>continue和break退出循环</title>
</head>
<body>
<script>
// 打印5句话
// let i = 1
// while (i <= 5) {
// if (i === 3) {
// break // 退出整个循环
// }
// console.log(`我要吃第${i}个包子`)
// i++
// }
let i = 1
while (i <= 5) {
if (i === 3) {
// 这里需要一个i++ 因为当i=3时就死循环了 一直是3
i++
continue //结束本次循环,后面的语句都不执行了 继续执行下一次循环
}
console.log(`我要吃第${i}个包子`)
i++
}
</script>
</body>
</html>
代码
<!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>你爱我吗</title>
</head>
<body>
<script>
while (true) {
let str = prompt('你爱我吗')
// 退出条件 爱/...
if (str === '爱' || '爱你' || '我爱你' || '爱死你了') {
alert('宝宝~~~我也爱泥~>^<~')
break
}
}
</script>
</body>
</html>
综合案例
代码
<!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>
</head>
<body>
<script>
// 1. 开始循环 输入框写到循环里面
// 3. 准备一个总的金额 这个一定要写到循环外面 不然每次都会被重置
let money = 100
while (true) {
// （模板字符串）反引号是支持换行的，可以这样写 单双引号是不行的
let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)
// 2. 如果用户输入的4 则退出循环 break
if (re === 4) {
break
}
// 4. 根据输入做操作
switch (re) {
case 1:
// 存钱
let cun = +prompt('请输入存款金额')
money += cun
break
case 2:
// 取钱
let qu = +prompt('请输入取款金额')
money -= qu
break
case 3:
// 查余额
alert(`您的银行卡余额是${money}`)
break
}
}
</script>
</body>
</html>
（3）for循环
for循环的基本使用
代码
<!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>for循环的基本使用</title>
</head>
<body>
<script>
// 利用for循环输出三句话 月薪过万
// let i = 1只会执行一次
for (let i = 1; i <= 6; i++) {
document.write('月薪过万')
}
</script>
</body>
</html>
代码
<!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>for循环练习</title>
</head>
<body>
<script>
// 1. 输出1~100岁
// for (let i = 1; i <= 100; i++) {
// document.write(`今年我${i}岁了<br>`)
// }
// 2. 求1~100之间的偶数和
// let sum = 0
// for (let i = 1; i <= 100; i++) {
// if (i % 2 === 0) {
// 把i加到sum里面去
// sum = sum + i
// sum += i
// }
// }
// document.write(`1~100之间的偶数和是：${sum}`)
// 3. 页面打印5个小星星
// for (let i = 1; i <= 5; i++) {
// document.write('★')
// }
// 4. 打印数组
// let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
// console.log(arr[0])
// console.log(arr[1])
// console.log(arr[2])
// console.log(arr[3])
// i <= 4 长度 - 1
// for (let i = 0; i <= arr.length - 1; i++) {
// console.log(arr[i])
// }
// 遍历数组：从第一个循环到最后一个
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
</script>
</body>
</html>
代码
<!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>退出循环</title>
</head>
<body>
<script>
// for (let i = 1; i <= 5; i++) {
// if (i === 3) {
// 只要遇到了continue,本次循环continue下面的语句就不会再执行了
// continue
// }
// console.log(i)
// }
// for (let i = 1; i <= 5; i++) {
// if (i === 3) {
// break //退出整个循环 结束循环
// }
// console.log(i)
// }
// 无限循环
for (; ;) {
console.log(22)
}
</script>
</body>
</html>
for循环可以遍历数组，while(true)可以进行死循环
实在不确定用什么循环，优先考虑for循环
循环嵌套
代码
<!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>循环的嵌套</title>
</head>
<body>
<script>
// 外层循环打印 第n天
for (let i = 1; i <= 3; i++) {
document.write(`第${i}天<br>`)
// 里层循环打印 第几个单词
for (let j = 1; j <= 5; j++) {
document.write(`记住了第${j}个单词<br>`)
}
}
</script>
</body>
</html>
代码
<!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>打印五行五列小星星</title>
</head>
<body>
<script>
// 外层循环打印行数
// for (let i = 1; i <= 5; i++) {
// 内层循环打印几个星星
// for (let j = 1; j <= 5; j++) {
// document.write('★')
// }
// 进行换行显示
// document.write('<br>')
// }
// 升级版本
let row = +prompt('请输入行数：')
let col = +prompt('请输入列数：')
// 外层循环打印行数
for (let i = 1; i <= row; i++) {
// 内层循环打印几个星星
for (let j = 1; j <= col; j++) {
document.write('★')
}
// 进行换行显示
document.write('<br>')
}
</script>
</body>
</html>
代码
<!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>打印倒三角形星星</title>
</head>
<body>
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 5; i++) {
// 2. 里层循环控制列数（几个星星）
for (let j = 1; j <= i; j++) {
document.write('☆')
}
// 换行
document.write('<br>')
}
</script>
</body>
</html>
代码
<!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>九九乘法表</title>
<style>
span {
display: inline-block;
/* 我们会发现错位了，因为两位数和一位数撑开的宽度是不一样的，查看两位数盒子的宽度来设置死宽度，然后文字居中 */
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
text-align: center;
color: hotpink;
}
</style>
</head>
<body>
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 9; i++) {
// 2. 里层循环控制列数
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} x ${i} = ${i * j}</span>`)
}
// 换行
document.write('<br>')
}
</script>
</body>
</html>
八、数组
（1）数组是什么
（2）数组的基本使用
代码
<!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>数组的基本使用</title>
</head>
<body>
<script>
// 1. 字面量声明数组
// let arr = [1, 2, 'pink', true]
// 2. 使用new Array 构造函数声明 了解
let arr = new Array(1, 2, 3, 4)
console.log(arr)
</script>
</body>
</html>
代码
<!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>数组求和以及求平均值</title>
</head>
<body>
<script>
let arr = [2, 6, 6, 4, 2]
// 1. 求和的变量 sum
let sum = 0
// 2. 遍历累加
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
sum += arr[i]
}
console.log(`数组的和的结果是：${sum}`)
// 3. 平均值: 和 / arr.length = 4
console.log(`数组的平均值结果是：${sum / arr.length}`)
</script>
</body>
</html>
代码
<!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>求数组最大值和最小值</title>
</head>
<body>
<script>
let arr = [2, 6, 6, 4, 2]
// max 里面需要存的是最大值
let max = arr[0]
// min 里面要存的是最小值
let min = arr[0]
// 遍历数组 让i = 0也可以 已经让max等于第一个值了 所以可以不用从第一个值开始遍历
for (let i = 1; i < arr.length; i++) {
// 如果max比数组元素里面的值小， 我们就要把这个数组元素赋值给max
// max < arr[i] ? max = arr[i] : max //这样也可以
if (max < arr[i]) {
max = arr[i]
}
// 如果min 比数组元素大，我们就需要把数组元素给min
if (min > arr[i]) {
min = arr[i]
}
}
// 输出max min
console.log(`最大值是${max}`)
console.log(`最小值是${min}`)
</script>
</body>
</html>
（3）操作数组
代码
<!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>数组操作-改</title>
</head>
<body>
<script>
// let arr =[]
// console.log(arr)
// console.log(arr[0]) //undefined
// arr[0] = 1
// arr[1] = 5
// console.log(arr)
let arr = ['pink', 'green', 'blue']
//修改
// arr[0] = 'hotpink'
// console.log(arr)
// 要想给所有数组元素后面加一个格子 需要遍历数组
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + '格子'
}
console.log(arr)
</script>
</body>
</html>
代码
<!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>数组操作-新增push</title>
</head>
<body>
<script>
let arr = ['pink', 'hotpink']
//新增 结尾追加
// console.log(arr.push('deeppink')) //3 arry.push返回值是数组的长度
// arr.push('deeppink', 'lightpink')
// console.log(arr)
// 开头追加
arr.unshift('red')
console.log(arr)
</script>
</body>
</html>
代码
<!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>数组筛选</title>
</head>
<body>
<script>
// 重点案例
let arr = [4, 5, 77, 66, 99, 88, 19]
// 1. 声明新的空的数组
let newArr = []
// 2. 遍历旧数组
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 3. 满足条件 追加给新的数组
newArr.push(arr[i])
}
}
// 4. 输出新的数组
console.log(newArr)
</script>
</body>
</html>
代码
<!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>数组去0案例</title>
</head>
<body>
<script>
let arr = [6, 3, 7, 9, 0, 7, 66, 0, 99, 77]
// 1. 声明一个新的数组
let newArr = []
// 2. 遍历筛选
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
// 输出新数组
console.log(newArr)
</script>
</body>
</html>
代码
<!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>数组操作-删除</title>
</head>
<body>
<script>
let arr = ['red', 'green', 'blue']
// console.log(arr.pop()) //blue
// 1. pop() 删除最后一个元素
// arr.pop()
// console.log(arr)
// 2. shift() 删除第一个元素
// arr.shift()
// console.log(arr)
// 3. splice删除指定元素 splice(起始位置(索引号)， 删除几个)
arr.splice(1, 1) // 是从索引号1的位置开始删，只删除1个
// arr.splice(1) // 从green 删除到最后
console.log(arr)
</script>
</body>
</html>
（4）操作案例
代码
<!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>根据数据生成柱形图</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
// 1. 四次弹框效果
// 声明一个新的数组
let arr = []
for (let i = 1; i <= 4; i++) {
// let num = prompt(`请输入第${i}季度的数据：`)
// arr.push(num)
// 可以合并起来写
arr.push(prompt(`请输入第${i}季度的数据：`))
// push记得加小括号，而不是等号赋值形式
}
// console.log(arr)
// 盒子开头
document.write(`<div class="box">`)
//盒子中间 利用循环的形式 跟数组有关系
for (let i = 0; i < arr.length; i++) {
document.write(`
<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
//盒子结尾
document.write(`</div>`)
</script>
</body>
</html>
5.拓展-冒泡排序
代码
<!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>冒泡排序</title>
</head>
<body>
<script>
let arr = [5, 4, 3, 2, 1]
// for (let i = 0; i < arr.length - 1; i++) {
// for (let j = 0; j < arr.length - i - 1; j++) {
// 开始交换 但是前提 第一个数大于第二个数才交换
// if (arr[j] > arr[j + 1]) {
// 交换2个变量
// let temp = arr[j]
// arr[j] = arr[j + 1]
// arr[j + 1] = temp
// }
// }
// }
// 在开发中我们用这个来帮我们排序
// arr.sort() //排序 默认是升序排法
// sort 升序排列
/* arr.sort(function (a, b) {
return a - b
}) */
// sort() 降序
arr.sort(function (a, b) {
return b - a
})
console.log(arr)
</script>
</body>
</html>
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
