JavaWeb（4）——HTML、CSS、JS 快速入门

太过爱你忘了你带给我的痛 2023-10-13 11:33 82阅读 0赞

## 一、JavaScript 数组 ##

![31991f7085924314813079eb2ed141fe.png][]

###### 数组筛选（查找，将原来数组中的某些数据去除） ######

<!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 = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
        // 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>

![9e485c82f47b499c9ee335590abc1d3f.png][]

###### 数组筛选（查找，数组中的最大和最小值） ######

<!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 = [2, 6, 1, 7, 400, 55, 88, 100]
        // max里面要存的是最大值
        let max = arr[0]
        // min 要存放的是最小值
        let min = arr[0]
        // 遍历数组
        for (let i = 1; i < arr.length; i++) {
          // 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max
          // if (max < arr[i]) max = arr[i]
          max < arr[i] ? max = arr[i] : max
          // 如果min 比 数组元素大， 我们就需要把数组元素给min
          // if (min > arr[i]) {
          //   min = arr[i]
          // }
          min > arr[i] ? min = arr[i] : min
        }
        // 输出 max
        console.log(`最大值是: ${max}`)
        console.log(`最小值是: ${min}`)
      </script>
    </body>
    </html>

![8c8b50be2b20473cbe1f36495ad10157.png][]

###### 数组修改（数组中每个元素末尾都加新元素） ######

<!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 = []
        // console.log(arr)
        // // console.log(arr[0])  // undefined
        // arr[0] = 1
        // arr[1] = 5
        // console.log(arr)
        let arr = ['pink', 'red', 'green']
        // 修改
        // arr[0] = 'hotpink'
        // console.log(arr)
        // 给所有的数组元素后面加个老师  修改
        for (let i = 0; i < arr.length; i++) {
          // console.log(arr[i])
          arr[i] = arr[i] + '老师'
        }
        console.log(arr)
    
      </script>
    </body>
    
    </html>

![7cf2c47a411045aaaed89273d1de6c62.png][]

###### 数组修改（数组中每个元素开头都加新元素） ######

![c73dc857681f474bab3adfcd9c029168.png][]

<!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 = ['pink', 'hotpink']
        // 新增  push 推末尾
        // console.log(arr.push('deeppink'))  // 3
        // arr.push('deeppinnk', 'linghtpink')
        // console.log(arr)
        // 开头追加
        arr.unshift('red')
        console.log(arr)
      </script>
    </body>
    
    </html>

###### 数组删除指定元素 ######

![f91a1a77d8b8484bbf347902616068e2.png][]

![4bd850aba8a9478c90d4d9b878d2dcf1.png][]

<!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 = ['red', 'green', 'blue']
        // console.log(arr.pop()) // blue
        // 1.pop() 删除最后一个元素
        // arr.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>

###### 冒泡排序 ######

<!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]
        let arr = [2, 4, 3, 5, 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)
    
        // let num1 = 10
        // let num2 = 20
        // let temp = num1
        // num1 = num2
        // num2 = temp 
      </script>
    </body>
    
    </html>

![ad94849e7aea4d17b73563f56ec71be4.png][]

这段代码实现了一种冒泡排序算法：

1.  首先，定义了一个数组 arr = \[2, 4, 3, 5, 1\]，其中包含了待排序的元素。
2.  然后，调用了数组的 sort() 方法来排序数组中的元素。sort() 方法接受一个回调函数作为参数，该回调函数用于指定排序的规则。
3.  回调函数通过比较两个元素 a 和 b 的大小来确定它们在排序结果中的顺序。在这里，回调函数使用了一个简单的比较规则，即 b - a。如果 b 大于 a，则返回一个正数，表示 b 应该排在 a 前面；如果 b 小于 a，则返回一个负数，表示 b 应该排在 a 后面；如果 b 等于 a，则返回 0，表示它们的相对顺序不变。
4.  冒泡排序的核心思想是，重复地遍历数组，每次比较相邻的两个元素，如果它们的相对顺序不符合要求（按照回调函数的规则），则交换它们的位置，直到整个数组按照要求排好序。
5.  最后，将排序后的数组输出到控制台使用 console.log() 方法打印出来。在这个例子中，输出结果是 \[5, 4, 3, 2, 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>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>
            // 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)  ['123','135','345','234']
            // 盒子开头
            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>

首先，在 HTML 的 `<head>` 标签中定义了一些 CSS 样式，用于布局和美化页面。这些样式设置了一个名为 "box" 的容器，并定义了容器内部每个柱状图的样式。

###### \* 选择器： ######

设置所有元素的 margin 和 padding 属性为 0，取消默认的边距和内边距。

###### .box 类选择器：定义一个名为 "box" 的容器的样式。具体含义如下： ######

> display: flex;：将容器设置为弹性布局，使其内部元素可以灵活排列。  
> width: 700px;：设置容器的宽度为 700 像素。  
> height: 300px;：设置容器的高度为 300 像素。  
> border-left: 1px solid pink;：设置容器的左边框为粉色实线。  
> border-bottom: 1px solid pink;：设置容器的底边框为粉色实线。  
> margin: 50px auto;：将容器水平居中，并在上下方向上有 50px 的外边距。  
> justify-content: space-around;：在容器内部沿主轴方向（水平方向）均匀分布元素，两端留有空白间距。  
> align-items: flex-end;：在容器内部沿交叉轴方向（垂直方向）将元素对齐到底部。  
> text-align: center;：将容器内元素的文本内容居中对齐。

`.box>div` 是一个 CSS 选择器，表示选择 `.box` 容器内的直接子元素为 `<div>` 的元素。具体含义是选择容器 `.box` 内的直接子级 `<div>` 元素，并对其应用相应的样式规则。

在给定的样式代码中，`.box>div` 选择器被用来定义了 `.box` 容器内的子级 `<div>` 元素的样式。通过这个选择器可以对柱状图中的每个柱子进行样式设置，包括宽度、背景颜色等。

.box>div 类选择器：定义容器内 <div> 元素的样式。具体含义如下：

display: flex;：将 <div> 元素设置为弹性布局，使其内部元素可以灵活排列。  
width: 50px;：设置 <div> 元素的宽度为 50 像素。  
background-color: pink;：设置 <div> 元素的背景颜色为粉色。  
.box div span 选择器：定义 <div> 元素内的 <span> 标签的样式。具体含义如下：

margin-top: -20px;：将 <span> 元素向上移动 20 像素，用于调整显示位置。  
.box div h4 选择器：定义 <div> 元素内的 <h4> 标签的样式。具体含义如下：

margin-bottom: -35px;：将 <h4> 元素向上移动 35 像素，用于调整显示位置。  
width: 70px;：设置 <h4> 元素的宽度为 70 像素。  
margin-left: -10px;：将 <h4> 元素向左移动 10 像素，用于调整显示位置。

###### 接下来，在 HTML 的 `<body>` 标签中，通过 JavaScript 代码实现了以下功能： ######

1.  定义了一个空数组 `arr`，用于存储用户输入的四个季度的数据。
2.  使用 for 循环遍历四次，每次弹出一个对话框（prompt），要求用户输入一个季度的数据，并将用户输入的数据添加到数组 `arr` 中。
3.  使用 document.write() 方法输出 HTML 代码，开始构建包含柱状图的 `<div>` 容器。该容器的类名为 "box"。
4.  使用 for 循环遍历数组 `arr`，在容器内部创建 `<div>` 元素来表示每个柱状图。根据用户输入的数据设置每个柱状图的高度（`style="height: ${arr[i]}px;"`）。
5.  在每个柱状图中，使用 `<span>` 标签显示对应季度的数据（`${arr[i]}`），使用 `<h4>` 标签显示季度的序号（`第${i + 1}季度`）。
6.  最后，使用 document.write() 方法输出结束标记 `</div>`，完成整个柱状图的构建。

这段代码通过用户输入的数据动态生成了一个柱状图，并在页面上展示出来。每个柱状图的高度对应季度的数据值，通过这种方式可以直观地比较不同季度的数据大小。

![b37a59cfaa5e4d3a9b797d1c28aaa31f.png][]

## 二、JavaScript 函数 ##

###### 函数命名 ######

![a673f2fa1d3b4c42a96137a86034d156.png][]

###### 函数传参 ######

![e729631d33d34574b6ee4acdbcf2d6c1.png][]

###### 函数返回值 ######

![968e447c769245ada01b66cda7baa40c.png][]

###### break结束的是循环，return结束的是函数 ，返回多个数据可以使用数组。 ######

![b2b785d61ded4849ae4e67510315caa9.png][]

![9ef6f8027d7c4bccb3a8a714eb317d52.png][]

![ecc509c3da084742846c50fb1429e04a.png][]

![a391e25aa6f048ea994f70eb9102f324.png][]

###### 函数作用域 ######

作用域链：采取就近原则的方式来查找变量最终的值

###### 匿名函数 ######

![43643bf1cfbd437b893a9c386df9cfd7.png][]

没有名字的函数, 无法直接使用。 使用方式：① 函数表达式 ；② 立即执行函数

![b03ade7618644d52979efcde2115e0b2.png][]

![2bbf582b33064c42be140ce5e82a8212.png][]

![205f160265b84313802f5b0fe0c108ab.png][]

![ca775f3392d4417b9750fc497870d0f0.png][]

<!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>
        // age = age + 1
        // 1. 用户输入
        let second = +prompt('请输入秒数:')
        // 2.封装函数
        function getTime(t) {
          // console.log(t)  // 总的秒数
          // 3. 转换
          // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
          // 分钟：  m = parseInt(总秒数 / 60 % 60)
          // 秒数: s = parseInt(总秒数 % 60) 
          let h = parseInt(t / 60 / 60 % 24)
          let m = parseInt(t / 60 % 60)
          let s = parseInt(t % 60)
          h = h < 10 ? '0' + h : h
          m = m < 10 ? '0' + m : m
          s = s < 10 ? '0' + s : s
          // console.log(h, m, s)
          return `转换完毕之后是${h}小时${m}分${s}秒`
        }
        let str = getTime(second)
        document.write(str)
        console.log(h)
      </script>
    </body>
    
    </html>

![cf7ec363f9b1473eb35e60c5c0fcff4e.png][]

![5f65b7e70c46421d916f2538c5fb022d.png][]

这个跟之前讲的逻辑中断很像 ，如果当时函数调用的时候不传值进去。此时得到的就是0。

![8d2cb62a965043d19880333f49867f2b.png][]

![856ed98bed2b4f54bf9287e493eb10e7.png][]

![578ecc2706d9478aa30db19dc1d1e8f0.png][]

![8dd2d7e047fd4a8a9c3e51c741cb61ae.png][]

## 三、关系运算符比较总结 ##

由于之后的代码中常常有写if判断的地方，所以需要对运算符的运算结果做一些总结。

![cf8729ff142f453e8b2344585bb580ec.png][] ![515c3c5475314647ad415ffbaa709804.png][]

![25b84fd2fd34433892efa06e09cdda12.png][]

![aa9dcb867be54d96bb2ae9c955b50986.png][]

[31991f7085924314813079eb2ed141fe.png]: https://img-blog.csdnimg.cn/31991f7085924314813079eb2ed141fe.png
[9e485c82f47b499c9ee335590abc1d3f.png]: https://img-blog.csdnimg.cn/9e485c82f47b499c9ee335590abc1d3f.png
[8c8b50be2b20473cbe1f36495ad10157.png]: https://img-blog.csdnimg.cn/8c8b50be2b20473cbe1f36495ad10157.png
[7cf2c47a411045aaaed89273d1de6c62.png]: https://img-blog.csdnimg.cn/7cf2c47a411045aaaed89273d1de6c62.png
[c73dc857681f474bab3adfcd9c029168.png]: https://img-blog.csdnimg.cn/c73dc857681f474bab3adfcd9c029168.png
[f91a1a77d8b8484bbf347902616068e2.png]: https://img-blog.csdnimg.cn/f91a1a77d8b8484bbf347902616068e2.png
[4bd850aba8a9478c90d4d9b878d2dcf1.png]: https://img-blog.csdnimg.cn/4bd850aba8a9478c90d4d9b878d2dcf1.png
[ad94849e7aea4d17b73563f56ec71be4.png]: https://img-blog.csdnimg.cn/ad94849e7aea4d17b73563f56ec71be4.png
[b37a59cfaa5e4d3a9b797d1c28aaa31f.png]: https://img-blog.csdnimg.cn/b37a59cfaa5e4d3a9b797d1c28aaa31f.png
[a673f2fa1d3b4c42a96137a86034d156.png]: https://img-blog.csdnimg.cn/a673f2fa1d3b4c42a96137a86034d156.png
[e729631d33d34574b6ee4acdbcf2d6c1.png]: https://img-blog.csdnimg.cn/e729631d33d34574b6ee4acdbcf2d6c1.png
[968e447c769245ada01b66cda7baa40c.png]: https://img-blog.csdnimg.cn/968e447c769245ada01b66cda7baa40c.png
[b2b785d61ded4849ae4e67510315caa9.png]: https://img-blog.csdnimg.cn/b2b785d61ded4849ae4e67510315caa9.png
[9ef6f8027d7c4bccb3a8a714eb317d52.png]: https://img-blog.csdnimg.cn/9ef6f8027d7c4bccb3a8a714eb317d52.png
[ecc509c3da084742846c50fb1429e04a.png]: https://img-blog.csdnimg.cn/ecc509c3da084742846c50fb1429e04a.png
[a391e25aa6f048ea994f70eb9102f324.png]: https://img-blog.csdnimg.cn/a391e25aa6f048ea994f70eb9102f324.png
[43643bf1cfbd437b893a9c386df9cfd7.png]: https://img-blog.csdnimg.cn/43643bf1cfbd437b893a9c386df9cfd7.png
[b03ade7618644d52979efcde2115e0b2.png]: https://img-blog.csdnimg.cn/b03ade7618644d52979efcde2115e0b2.png
[2bbf582b33064c42be140ce5e82a8212.png]: https://img-blog.csdnimg.cn/2bbf582b33064c42be140ce5e82a8212.png
[205f160265b84313802f5b0fe0c108ab.png]: https://img-blog.csdnimg.cn/205f160265b84313802f5b0fe0c108ab.png
[ca775f3392d4417b9750fc497870d0f0.png]: https://img-blog.csdnimg.cn/ca775f3392d4417b9750fc497870d0f0.png
[cf7ec363f9b1473eb35e60c5c0fcff4e.png]: https://img-blog.csdnimg.cn/cf7ec363f9b1473eb35e60c5c0fcff4e.png
[5f65b7e70c46421d916f2538c5fb022d.png]: https://img-blog.csdnimg.cn/5f65b7e70c46421d916f2538c5fb022d.png
[8d2cb62a965043d19880333f49867f2b.png]: https://img-blog.csdnimg.cn/8d2cb62a965043d19880333f49867f2b.png
[856ed98bed2b4f54bf9287e493eb10e7.png]: https://img-blog.csdnimg.cn/856ed98bed2b4f54bf9287e493eb10e7.png
[578ecc2706d9478aa30db19dc1d1e8f0.png]: https://img-blog.csdnimg.cn/578ecc2706d9478aa30db19dc1d1e8f0.png
[8dd2d7e047fd4a8a9c3e51c741cb61ae.png]: https://img-blog.csdnimg.cn/8dd2d7e047fd4a8a9c3e51c741cb61ae.png
[cf8729ff142f453e8b2344585bb580ec.png]: https://img-blog.csdnimg.cn/cf8729ff142f453e8b2344585bb580ec.png
[515c3c5475314647ad415ffbaa709804.png]: https://img-blog.csdnimg.cn/515c3c5475314647ad415ffbaa709804.png
[25b84fd2fd34433892efa06e09cdda12.png]: https://img-blog.csdnimg.cn/25b84fd2fd34433892efa06e09cdda12.png
[aa9dcb867be54d96bb2ae9c955b50986.png]: https://img-blog.csdnimg.cn/aa9dcb867be54d96bb2ae9c955b50986.png