第六次网课
1.三元分支语句
使用场景：比if双分支更简单的语句，一般用来取值
符号：？ ：
let sum = 3 < 5 ? 3 : 5
console.log(sum)
小案例
<script>
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
num1 > num2 ? alert(`最大值是：${num1}`) : alert(`最大值是：${num2}`)
</script>
数字补零案例
<script>
let num = prompt('请输入一个数')
num < 10 ? alert(`0${num}`) : alert(num)
</script>
第二种
let num = prompt('请输入一个数')
num = num < 10 ? 0 + num : num
alert(num)
2.Switch语句
找到跟小括号里数据全等的case值,并执行对应的代码
若没有**全等===**的则执行default（默认）里的代码
switch case语句一般适用于等值判断，不适合与区间判断
switch case语句一般要配合break关键字使用否则会造成case穿透
模板：
简单计算器案例
<script>
let num1 = prompt('请您输入第一个数')
let num2 = prompt('请您输入第二个数')
let sp = prompt('请您输入+—*/中的一个')
switch (sp) {
case '+' :
alert(`两个数的加法操作是${num1 + num2}`)
break
case '-' :
alert(`两个数的减法操作是${num1 - num2}`)
break
case '*' :
alert(`两个数的乘法操作是${num1 * num2}`)
break
case '/' :
alert(`两个数的除法操作是${num1 / num2}`)
break
default:
alert(`你干啥`)
}
</script>
3.断点调试
作用：工作可以更好找到bug
打开F12开发者工具
点到sources一栏
选择代码文件
4.while循环
三要素
- 变量起始值
- 终止条件
- 变量变化量（自增或自减）
用
是要加``反引号才能起到换行作用
<script>
let i = 1
while(i <= 3) {
document.write(`我要循环三次<br>`)
i++
}
</script>
let end = prompt(`请输入要循环的次数：`)
let i=1
while(i <= end) {
document.write(`好好学习<br>`)
i++
}
5.综合循环大练习
while可以在外面打印而for循环不可以
- 页面输出1~100
<script>
// 1. 页面输出1~100
let i = 1
while(i <=100) {
document.write(`这是第${i}个数<br>`)
i++
}
</script>
- 一到一百的总和并输出
// 2.一到一百的总和并输出
let i = 1
let sum = 0
while(i <= 100) {
sum += i
i++
}
document.write(sum)
- 计算1~100偶数和
// 3. 计算1~100偶数和
let i = 1
let sum = 0
while(i <= 100) {
if (i % 2 === 0) {
sum += i
}
i++
}
document.write(sum)
- 计算1~100奇数和
let i = 1
let sum = 0
while(i <= 100) {
if (i % 2 !== 0) {
sum += i
}
i++
}
document.write(sum)
6.退出循环
break
let i = 1
while(i <= 5) {
if(i ===3) {
break //退出整个循环
}
document.write(`我要吃${i}个包子`)
i++
}
continue(一定在前面加上i++）
let i = 1
while(i <= 5) {
if(i === 3) {
i++
continue//只结束本次循环
}
document.write(`我要吃第${i}个包子`)
i++
}
你爱我吗案例
<script>
while(true) {
let str = prompt('你爱我吗')
if(str === '爱') {
break
}
}
</script>
简易ATM取款机案例
<script>
let money = 100
while(true) {
let re = +prompt(`您要进行的操作：
1.取款
2.存款
3.察看余额
4.退出 `)
switch (re) {
case 1 :
let cun = +prompt('请输入存款金额')
money += cun
break
case 2 :
let qu = +prompt('请输入取款的金额')
money -= qu
break
case 3 :
alert(`您的余额是${money}元`)
break
}
if(re === 4) {
break
}
}
</script>
注意：
因为break只能退出一层循环，所以case里面写break不能真正退出，只能写if语句
7.If与Switch的区别
共同点
- 都能实现多分支选择，
- 大部分情况下可以互换
区别
- Switch通常处理case为比较确定的情况下，而if···else通常适用于范围判断
- Switch语句进行判断后直接执行到程序的语句，效率更高，而if语句有几种判断条件，就得判断多少次
- Switch一定要注意是全等===，一定注意数据类型，同时注意break，否则会有穿透效果
结论
- 当分支比较少时，用if···else
- 当分支比较多时，用switch···case
8.for语句
1.for循环基本使用
月薪过万for循环
<script>
for(let i = 1; i <= 3; i++) {
document.write('月薪过万<br>')
}
</script>
用for输出1~100
for(let i = 1; i<= 100; i++) {
document.write(`第${i}`)
}
求1~100之间的偶数和
let sum = 0
for(let i = 1; i <= 100; i++) {
if(i % 2 ===0) {
sum += i
}
}
document.write(sum)
页面打印小星星
for(let i = 1; i <= 5; i++) {
document.write('*')
}
2.for的遍历数组
<script>
let arr = ['刘德华', '刘晓庆','刘小强','刘达强']
for(i = 0; i <= arr.length - 1; i++) {
console.log(arr[i])
或者
let arr = ['刘德华', '刘晓庆','刘小强','刘达强']
for(i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
3.退出循环
- continue 退出本次循环，一般用于排除或跳过某个选项时
- break 退出整个for循环，一般用于结果已经得到，后续循环不需要时用
了解：
- while(true)来构造"无限"循环，需要用break退出循环
- for(;;)也可以用来构造"无限"循环，同样要用break退出循环
for循环和while循环的区别
- 当明确了循环的次数用for循环
- 当不明确循环的次数时用while循环
4.循环嵌套
<script>
for(let i = 1; i <= 3; i++) {
document.write(`第${i}天<br>`)
for(let j = 1; j <= 5; j++) {
document.write(`第${j}个单词<br>`)
}
}
</script>
五行五个小行星
// 小案例
for( let i = 1; i <= 5; i++) {
document.write('*')
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++) {
document.write('*')
for(let j =1; j <= col; j++) {
document.write(`*`)
}
document.write(`<br>`)
}
直角三角形
for(i = 1;i <= 5;i++) {
document.write('*')
for(j = 1;j <= i;j++) {
document.write('*')
}
document.write(`<br>`)
}
九九乘法表案例
<style>
span {
display: inline-block;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
padding: 5px 10px;
border: 1px solid black;
border-radius: 5px;
margin: 4px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
}
</style>
</head>
<body>
<script>
for(i = 1;i <= 9;i++) {
for(j = 1;j <= i;j++) {
document.write(`<span>${j} × ${i} = ${i * j}</span>`)
}
document.write(`<br>`)
}
</script>
9.数组
声明语法：
let arr = [1,12,‘pink’,true](可以储存任意类型的数据）
数组求和与平均值
let arr = [2, 6, 1, 7, 4]
let sum = 0
for(let i = 0; i < arr.length ; i++) {
sum += arr[i]
}
console.log(`数组的和结果是:${sum}`)
console.log(`数组的平均值结果是${sum / arr.length}`)
1.求数组最大值和最小值
let arr = [2, 6, 1, 7, 400, 55, 56]
let max = arr[0]
let min = arr[0]
for(let i = 1;i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
if (min > arr[i]) {
min = arr[i]
}
}
console.log(`最大值是：${max}`)
console.log(`最小值是：${min}`)
2.改
let arr = ['pink', 'red', 'green']
for(let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + '老师'
}
console.log(arr);
3.增
推push
let arr = ['pink', 'red', 'green']
arr.push = ['hotpink', 'lightpink']
console.log(arr)
开头追加unshift
let arr = ['pink', 'red', 'green']
arr.unshift = ['hotpink']
console.log(arr)
返回新的数组长度
3.数组筛选
非常重要
let arr = [1,11,34,56,88,0,2,0,5]
let newArr = []
for(let i = 0; i < arr.length;i++) {
if(arr[i] > 10) {
newArr.push(arr[i])
}
}
console.log(newArr)
数组排零
let arr = [1,11,34,56,88,0,2,0,5]
let newArr = []
for(let i = 0;i < arr.length; i++) {
if (arr[i] !==0) {
newArr.push(arr[i])
}
}
console.log(newArr)
4.数组删除
语法：
- arr.pop() 从最后一个开始删，小括号里不带参数，返回值是删除的元素
- arr.shift() 从第一个开始删，小括号里不带参数，返回值是删除的元素
- splice() 删除指定元素 arr.splice(start,deleteCount)
- arr.splice(从第几个元素开始，一共删除几个 （如果不写默认删到最后））
arr.splice(1,1)//从索引号1的位置开始删，只删一个
10.综合案例—渲染柱形图
“display:flex”：
“display:flex”是CSS（层叠样式表）中的一个属性值，用于创建弹性布局。它可以让容器内的子元素（也称为flex项目）在一个方向（可以是行方向或列方向）上灵活地排列，并且可以方便地控制子元素的对齐、分布和尺寸等。
- 主轴和交叉轴：
在flex布局中有两个重要的轴。主轴（main axis）是flex项目排列的主要方向，默认是水平方向（从左到右）；交叉轴（crossaxis）与主轴垂直，用于定义垂直于排列方向的对齐方式等。- 对齐方式：
可以控制子元素在主轴上的对齐方式，如
“justify - content:flex - start”（默认值，子元素从主轴起点开始排列）
“justify -content:center”（子元素在主轴居中排列）
“justify - content:flex -end”（子元素在主轴终点排列
“justify - content:space -between”（子元素在主轴上均匀分布，两端对齐）
“justify - content:space -around”（子元素在主轴上均匀分布，每个元素两侧都有相等的间隔）。- 对于交叉轴上的对齐，使用“align - items”属性，其值包括“stretch”（默认值，子元素会拉伸以适应容器的交叉轴尺寸）、“flex -start”、“center”、“flex - end”等。
- 弹性子元素的尺寸调整：子元素（flex项目）可以根据容器的尺寸灵活地调整自身大小。可以通过“flex - grow”、“flex - shrink”和“flex - basis”等属性来控制子元素在容器剩余空间中的伸缩行为。例如，“flex - grow”属性定义了子元素在有剩余空间时的伸展比例。
${arr[i]}px,他们之间千万不能有空格，i从0开始，所以第一季度为i+1
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
