03_for 循环 + 数组

01_for 循环

01_for 循环语法

作用: 重复执行代码

好处: 把声明起始值, 循环条件, 变化值写到一起, 让人一目了然, 它是最常使用的循环形式

html

<!-- /code/test.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.利用 for 循环输出三句话 月薪过万
    for (let i = 1; i <= 3; i++) {
      document.write('月薪过万 <br>')
    }
  </script>
</body>

</html>

02_利用 for 循环输出 1~100 岁

html

<!-- /code/test.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.利用 for 循环输出 1~100 岁
    for (let i = 1; i <= 100; i++) {
      document.write(`今年我 ${i} 岁了 <br>`)
    }
  </script>
</body>

</html>

03_求 1~100 之间所有的偶数和

html

<!-- /code/test.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.求 1~100 之间所有的偶数和
    let sum = 0

    for (let i = 1; i <= 100; i++) {
      if (i % 2 === 0) {
        // 2.把 i 加到 sum 里面去: sum = sum + i
        sum += i
      }
    }

    document.write(`1~100 之间的偶数和是: ${sum}`)
  </script>
</body>

</html>

04_页面中打印 5 个小星星

html

<!-- /code/test.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.页面中打印 5 个小星星
    for (let i = 1; i <= 5; i++) {
      document.write('★')
    }
  </script>
</body>

</html>

02_遍历数组

01_遍历数组

for 循环的最大价值: 循环数组

需求: 请将数组 ['马超', '赵云', '张飞', 关羽', '黄忠'] 依次打印出来

html

<!-- /code/test.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.打印数组
    let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink 老师']

    // 2.必须从 0 开始, 因为数组索引号从 0 开始  arr.length = 6
    // for (let i = 0; i <= arr.length - 1; i++) {
    //   console.log(arr[i])
    // }

    // 3.遍历数组: 从第一个循环到最后一个
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i])
    }
  </script>
</body>

</html>

03_退出循环

01_退出循环

continue 退出本次循环, 一般用于排除或者跳过某一个选项的时候, 可以使用 continue
break 退出整个 for 循环, 一般用于结果已经得到, 后续的循环不需要的时候可以使用

html

<!-- /code/test.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>
    for (let i = 1; i <= 5; i++) {
      if (i === 3) {
        continue // 1.退出本次循环, 本次循环中 continue 下面的语句不在执行
      }
      console.log(i)
    }

    for (let i = 1; i <= 5; i++) {
      if (i === 3) {
        break // 2.退出整个 for 循环 结束循环
      }
      console.log(i)
    }
  </script>
</body>

</html>

了解:

while(true) 来构造 "无限" 循环, 需要使用 break 退出循环
for(;😉 也可以来构造 "无限" 循环, 同样需要使用 break 退出循环

html

<!-- /code/test.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.无限循环
    for (; ;) {
      console.log(11)
    }
  </script>
</body>

</html>

02_总结

for 循环和 while 循环有什么区别呢

当如果明确了循环的次数的时候推荐使用 for 循环
当不明确循环的次数的时候推荐使用 while 循环

04_循环嵌套

01_for 循环嵌套

一个循环里再套一个循环, 一般用在 for 循环里

计算: 假如每天记住 5 个单词, 3 天后一共能记住多少单词:

拆解:

第一天: 5 个单词
第二天: 5 个单词
第三天: 5 个单词

html

<!-- /code/test.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.外层循环打印 第 n 天
    for (let i = 1; i <= 3; i++) {
      document.write(`第 ${i} 天 <br>`)
      
      // 2.里层循环打印 第几个单词
      for (let j = 1; j <= 5; j++) {
        document.write(`记住了第 ${j} 个单词 <br>`)
      }
    }
  </script>
</body>

</html>

05_循环嵌套练习

01_打印 5 行 5 列的星星

需求: 页面中打印出 5 行 5 列的星星

分析:

利用双重 for 循环来做
外层循环控制打印行, 内层循环控制每行打印几个 (列)

html

<!-- /code/test.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.外层循环控制打印行
    for (let i = 1; i <= 5; i++) {
      // 2.内层循环控制每行打印几个 (列)
      for (let j = 1; j <= 5; j++) {
        document.write('★')
      }

      // 进行换行显示
      document.write('<br>')
    }
  </script>
</body>

</html>

升级版本:

用户输入行数和列数, 打印对应的星星!

html

<!-- /code/test.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.用户输入行数和列数, 打印对应的星星
    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>

02_打印倒三角形星星

需求: 如图所示

分析:

利用双重 for 循环来做
外层循环控制打印行, 内层循环控制每行打印几个 (列)
内层循环的个数跟第几行是一一对应的

html

<!-- /code/test.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.外层循环控制打印行
    for (let i = 1; i <= 5; i++) {

      // 2.内层循环控制每行打印几个 (列)
      for (let j = 1; j <= i; j++) {
        document.write('★')
      }

      // 换行
      document.write('<br>')
    }
  </script>
</body>

</html>

06_九九乘法表案例

01_九九乘法表案例

需求: 如图所示

分析:

只需要把刚才倒三角形星星做改动
★ 换成 1 x 1 = 2 格式

html

<!-- /code/test.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>

  <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>

02_数组

01_基本使用

01_数组是什么

数组: (Array) 是一种可以按顺序保存数据的 数据类型

为什么要数组?

思考: 如果我想保存一个班里所有同学的姓名怎么办?
场景: 如果有多个数据可以用数组保存起来, 然后放到一个变量中, 管理非常方便

02_声明语法

例

数组是按顺序保存, 所以每个数据都有自己的编号
计算机中的编号从 0 开始, 所以小明的编号为 0, 小刚编号为 1, 以此类推
在数组中, 数据的编号也叫 索引或下标
数组可以存储任意类型的数据

html

<!-- /code/test.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.字面量声明数组
    let arr1 = [1, 2, 'pink', true]

    // 2.使用 new Array 构造函数声明 (了解)
    let arr2 = new Array(1, 2, 3, 4)
    console.log(arr2)
  </script>
</body>

</html>

03_取值语法

例

通过下标取数据

取出来是什么类型的, 就根据这种类型特点来访问

04_一些术语

元素: 数组中保存的每个数据都叫数组元素
下标: 数组中数据的编号
长度: 数组中数据的个数, 通过数组的 length 属性获得

05_遍历数组 (重点)

用循环把数组中每个元素都访问到, 一般会用 for 循环遍历

语法:

例

06_数组求和

需求: 求数组 [2, 6, 1, 7, 4] 里面所有元素的 和 以及 平均值

分析:

声明一个求和变量 sum
遍历这个数组, 把里面每个数组元素加到 sum 里面
用求和变量 sum 除以数组的长度就可以得到数组的平均值

html

<!-- /code/test.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>
    let arr = [2, 6, 1, 7, 4]

    // 1.声明一个求和变量 sum
    let sum = 0

    // 2.遍历这个数组, 把里面每个数组元素加到 sum 里面
    for (let i = 0; i < arr.length; i++) {
      // console.log(arr[i])  sum = sum + arr[i]
      sum += arr[i]
    }
    console.log(`数组的和的结果是: ${sum}`)

    // 3.用求和变量 sum 除以数组的长度就可以得到数组的平均值
    console.log(`数组的平均值结果是: ${sum / arr.length}`)
  </script>
</body>

</html>

02_求最大值 + 求最小值

01_数组求最大值和最小值

需求: 求数组 [2, 6, 1, 77, 52, 25, 7] 中的最大值

分析:

声明一个保存最大元素的变量 max
默认最大值可以取数组中的第一个元素
遍历这个数组, 把里面每个数组元素和 max 相比较
如果这个数组元素大于 max 就把这个数组元素存到 max 里面, 否则继续下一轮比较
最后输出这个 max

最大值

html

<!-- /code/test.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>
    let arr = [2, 6, 1, 77, 52, 25, 7]

    // 1.声明一个保存最大元素的变量 max; 可以取数组中的第一个元素 (默认最大值)
    let max = arr[0]

    // 2.遍历这个数组, 把里面每个数组元素和 max 相比较
    for (let i = 1; i < arr.length; i++) {
      // 3.如果这个数组元素大于 max 就把这个数组元素存到 max 里面, 否则继续下一轮比较
      if (max < arr[i]) {
        max = arr[i]
      }
    }

    // 4.最后输出这个 max
    console.log(`最大值是: ${max}`)
  </script>
</body>

</html>

最小值

html

<!-- /code/test.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>
    let arr = [2, 6, 1, 77, 52, 25, 7]

    // 1.声明一个保存最小元素的变量 min; 可以取数组中的第一个元素 (默认最小值)
    let min = arr[0]

    // 2.遍历这个数组, 把里面每个数组元素和 min 相比较
    for (let i = 1; i < arr.length; i++) {
      // 3.如果这个数组元素小于 min 就把这个数组元素存到 min 里面, 否则继续下一轮比较
      if (min > arr[i]) {
        min = arr[i]
      }
    }
    // 4.最后输出这个 min
    console.log(`最小值是: ${min}`)
  </script>
</body>

</html>

使用三元运算符

html

<!-- /code/test.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>
    let arr = [2, 6, 1, 77, 52, 25, 7]

    // 声明一个保存最大元素的变量 max; 可以取数组中的第一个元素 (默认最大值)
    let max = arr[0]
    // 声明一个保存最小元素的变量 min; 可以取数组中的第一个元素 (默认最小值)
    let min = arr[0]

    // 遍历这个数组, 把里面每个数组元素和 max 相比较, 把里面每个数组元素和 min 相比较
    for (let i = 1; i < arr.length; i++) {
      // 如果这个数组元素大于 max 就把这个数组元素存到 max 里面, 否则继续下一轮比较
      max < arr[i] ? max = arr[i] : max

      // 如果这个数组元素小于 min 就把这个数组元素存到 min 里面, 否则继续下一轮比较
      min > arr[i] ? min = arr[i] : min
    }

    // 最后输出这个 max
    console.log(`最大值是: ${max}`)
    // 最后输出这个 min
    console.log(`最小值是: ${min}`)
  </script>
</body>

</html>

03_重新赋值

01_操作数组

数组本质是数据集合, 操作数据无非就是 增删改查 语法:

02_重新赋值

html

<!-- /code/test.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>
    let arr = ['pink', 'red', 'green']
    // 1.重新赋值
    arr[0] = 'hotpink'
    console.log(arr) // ['hotpink', 'red', 'green']

    // 2.给所有的数组元素后面加个老师  修改
    for (let i = 0; i < arr.length; i++) {
      // console.log(arr[i])
      arr[i] = arr[i] + '老师'
    }
    console.log(arr) // ['hotpink老师', 'red老师', 'green老师']
  </script>
</body>

</html>

04_添加新的数据

01_push 添加到数组的末尾

数组.push() 方法将一个或多个元素添加到数组的末尾, 并返回该数组的新长度 (重点)

语法:

例如:

html

<!-- /code/test.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>
    let arr = ['pink', 'hotpink']

    // 1.数组.push(): 将一个或多个元素添加到数组的末尾, 并返回该数组的新长度
    console.log(arr.push('deeppink')) // 3
    arr.push('deeppinnk', 'linghtpink')
    console.log(arr) // ['pink', 'hotpink', 'deeppink', 'deeppinnk', 'linghtpink']
  </script>
</body>

</html>

02_unshift 添加到数组的开头

arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的 开头, 并返回该数组的新长度

语法:

例如

html

<!-- /code/test.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>
    let arr = ['pink', 'hotpink']

    // 1.arr.unshift(新增的内容): 将一个或多个元素添加到数组的 开头, 并返回该数组的新长度
    arr.unshift('red')
    console.log(arr) // ['red', 'pink', 'hotpink']
  </script>
</body>

</html>

03_总结

想要数组末尾增加数据元素利用那个方法?

arr.push()
可以添加一个或者多个数组元素
返回的是数组长度

想要数组开头增加数据元素利用那个方法?

arr.unshift()
可以添加一个或者多个数组元素
返回的是数组长度

重点记住那个?

arr.push()

05_数组筛选案例

01_数组筛选案例

需求: 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来, 放入新数组

分析:

声明一个新的数组用于存放新数据 newArr
遍历原来的旧数组, 找出大于等于 10 的元素
依次追加给新数组 newArr

html

<!-- /code/test.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>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]

    // 1.声明一个新的数组用于存放新数据 newArr
    let newArr = []

    // 2.遍历原来的旧数组
    for (let i = 0; i < arr.length; i++) {
      // 3.找出大于等于 10 的元素
      if (arr[i] >= 10) {
        // 4.依次追加给新数组 newArr
        newArr.push(arr[i])
      }
    }

    // 5.输出新的数组
    console.log(newArr) // [ 77, 52, 25 ]
  </script>
</body>

</html>

02_数组去 0 案例

需求: 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后, 形成一个不包含 0 的新数组

分析:

声明一个新的数组用于存放新数据 newArr
遍历原来的旧数组, 找出不等于 0 的元素
依次追加给新数组 newArr

html

<!-- /code/test.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>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]

    // 1.声明一个新的数组用于存放新数据 newArr
    let newArr = []

    // 2.遍历原来的旧数组
    for (let i = 0; i < arr.length; i++) {
      // 3.找出不等于 0 的元素
      if (arr[i] !== 0) {
        // 4.依次追加给新数组 newArr
        newArr.push(arr[i])
      }
    }
    
    // 5.输出新数组
    console.log(newArr) // [2, 6, 1, 77, 52, 25, 7]
  </script>
</body>

</html>

06_删除数据

01_pop 删除最后一个元素

数组.pop() 方法从数组中删除最后一个元素, 并返回该元素的值

语法:

例如:

html

<!-- /code/test.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>
    let arr = ['red', 'green', 'blue']

    // 1.数组.pop(): 从数组中删除最后一个元素, 并返回该元素的值
    console.log(arr.pop()) // blue
    console.log(arr) // ['red', 'green']
  </script>
</body>

</html>

02_shift 删除第一个元素

数组.shift() 方法从数组中删除第一个元素, 并返回该元素的值

语法:

例如:

html

<!-- /code/test.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>
    let arr = ['red', 'green', 'blue']

    // 1.数组.shift(): 从数组中删除第一个元素, 并返回该元素的值
    console.log(arr.shift()) // red
    console.log(arr) // ['green', 'blue']
  </script>
</body>

</html>

03_splice 删除指定元素

数组.splice() 方法删除指定元素

语法:

解释:

start 起始位置
指定修改的开始位置 (从 0 计数)
deletecount:
表示要移除的数组元素的个数
可选的; 如果省略则默认从指定的起始位置删除到最后

html

<!-- /code/test.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>
    let arr = ['red', 'green', 'blue']

    // 1.数组.splice(起始位置, 删除几个元素), 删除指定元素
    // arr.splice(1, 1) // 从索引号 1 的位置开始删, 只删除 1 个
    // console.log(arr) // ['red', 'blue']

    arr.splice(1) // 从索引号 1 的位置开始删, 删除到最后
    console.log(arr) // ['red']
  </script>
</body>

</html>

04_总结

想要数组末尾删除 1 个数据元素利用那个方法? 带参数吗?

arr.pop()
不带参数
返回值是删除的元素

想要数组开头删除 1 个数据元素利用那个方法? 带参数吗?

arr.shift()
不带参数
返回值是删除的元素

想要指定删除数组元素用那个? 开发常用吗? 有那些使用场景?

arr.splice(起始位置, 删除的个数)
开发很常用, 比如随机抽奖, 比如删除指定商品等等

03_综合案例

01_渲染柱形图案例上

需求: 用户输入四个季度的数据, 可以生成柱形图

分析:

需要输入 4 次, 所以可以把 4 个数据放到一个数组里面
利用循环, 弹出 4 次框, 同时存到数组里面

html

<!-- /code/test.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>Document</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>
  <div class="box">
    <div style="height: 123px;">
      <span>123</span>
      <h4>第 1 季度</h4>
    </div>
    <div style="height: 156px;">
      <span>156</span>
      <h4>第 2 季度</h4>
    </div>
    <div style="height: 120px;">
      <span>120</span>
      <h4>第 3 季度</h4>
    </div>
    <div style="height: 210px;">
      <span>210</span>
      <h4>第 4 季度</h4>
    </div>
  </div>

  <script>
    // 1.需要输入 4 次, 所以可以把 4 个数据放到一个数组里面
    let arr = []

    // 2.利用循环, 弹出 4 次框, 同时存到数组里面
    for (let i = 1; i <= 4; i++) {
      let num = prompt(`请输入第 ${i} 季度的数据:`)
      arr.push(num)
    }
    console.log(arr)
  </script>
</body>

</html>

02_渲染柱形图案例下

01_渲染柱形图案例下

分析:

遍历改数组, 根据数据生成 4 个柱形图, 渲染打印到页面中
柱形图就是 div 盒子, 设置宽度固定, 高度是用户输入的数据
div 里面包含显示的数字和第 n 季度

html

<!-- /code/test.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>Document</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>
    // 需要输入 4 次, 所以可以把 4 个数据放到一个数组里面
    let arr = []

    // 利用循环, 弹出 4 次框, 同时存到数组里面
    for (let i = 1; i <= 4; i++) {
      let num = prompt(`请输入第 ${i} 季度的数据:`)
      arr.push(num)
    }
    // console.log(arr)

    // 1.盒子开头
    document.write(`<div class="box">`)

    // 3.遍历改数组, 根据数据生成 4 个柱形图, 渲染打印到页面中
    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>          
      `)
    }

    // 2.盒子结尾
    document.write(` </div>`)
  </script>
</body>

</html>

04_冒泡排序

01_冒泡排序

冒泡排序是一种简单的排序算法
它重复地走访过要排序的数列, 一次比较两个元素, 如果他们的顺序错误就把他们交换过来; 走访数列的工作是重复地进行直到没有再需要交换, 也就是说该数列已经排序完成
这个算法的名字由来是因为越小的元素会经由交换慢慢 "浮" 到数列的顶端
比如数组 [2, 3, 1, 4, 5] 经过排序成为了 [1, 2, 3, 4, 5] 或者 [5, 4, 3, 2, 1]

分析:

一共需要的趟数我们用外层 for 循环
5 个数据我们一共需要走 4 趟
长度就是数组长度减去 1 arr.length-1
每一趟交换次数我们用里层 for 循环
第一道交换 4 次
第二趙交换 3 次
第三粮交换 2 次
第四趟交换 1 次
长度就是数组长度减去次數
但是我们次数是从 0 次开始的所以最终 arr.length-i-1
交换 2 个变量就好了

html

<!-- /code/test.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>Document</title>
</head>

<body>
  <script>
    let arr = [5, 4, 3, 2, 1]

    // 1.长度就是 数组长度 减去 1 arr.length-1
    for (let i = 0; i < arr.length - 1; i++) {
      // 2.我们次数 是从 0 次开始的 所以 最终 arr.length-i-1
      for (let j = 0; j < arr.length - i - 1; j++) {

        // 3.开始交换的前提 第一个数大于第二个数才交换
        if (arr[j] > arr[j + 1]) {
          // 4.交换 2 个变量
          let temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }

    console.log(arr) // [1, 2, 3, 4, 5]
  </script>
</body>

</html>

02_数组排序

数组.sort() 方法可以排序

语法:

html

<!-- /code/test.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>Document</title>
</head>

<body>
  <script>
    let arr = [5, 4, 3, 2, 1]

    // 1.升序排列写法
    arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr)  // [1, 2, 3, 4, 5]

    // 2.降序排列写法
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr)  // [5, 4, 3, 2, 1]
  </script>
</body>

</html>

03_for 循环 + 数组 ​

01_for 循环 ​

01_for 循环语法 ​

02_遍历数组 ​

03_退出循环 ​

04_循环嵌套 ​

05_循环嵌套练习 ​

06_九九乘法表案例 ​

02_数组 ​

01_基本使用 ​

02_求最大值 + 求最小值 ​

03_重新赋值 ​

04_添加新的数据 ​

05_数组筛选案例 ​

06_删除数据 ​

03_综合案例 ​

01_渲染柱形图案例上 ​

02_渲染柱形图案例下 ​

04_冒泡排序 ​

01_冒泡排序 ​

03_for 循环 + 数组

01_for 循环

01_for 循环语法

02_遍历数组

03_退出循环

04_循环嵌套

05_循环嵌套练习

06_九九乘法表案例

02_数组

01_基本使用

02_求最大值 + 求最小值

03_重新赋值

04_添加新的数据

05_数组筛选案例

06_删除数据

03_综合案例

01_渲染柱形图案例上

02_渲染柱形图案例下

04_冒泡排序

01_冒泡排序