黑马程序员-JavaScript-day04_黑马javascriptapi04-CSDN博客

本文链接：https://blog.csdn.net/qyk666/article/details/142914309

文章目录

思维导图-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>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>
    let arrH = []
    for (let i = 0; i < 4; i++) {
      arrH[i] = +prompt(`请输入第${i}季度的高度：`)

    }
    console.log(arrH)

    document.write(`<div class="box">`)
    for (let i = 0; i < 4; i++) {
      document.write(`
      <div style="height: ${arrH[i]}px;">
        <span>${arrH[i]}</span>
        <h4>第${i + 1}季度</h4>
      </div>`)
    }
    document.write(`</div>`)
  </script>
</body>

</html>

在这里插入图片描述

99乘法表案例

<!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;
      /* display: flex; */
      width: 100px;
      padding: 10px;
      margin: 5px;
      border: 1px solid #000;
      text-align: center;
    }
  </style>
</head>

<body>
  <script>
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j}*${i}=${i * j}</span>`)
      }
      document.write('<br>')
    }
  </script>
</body>

</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>
    function getArr(arr) {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      alert(sum)
    }
    getArr([1, 2, 3])
    // getArr(1, 2, 3)
  </script>
</body>

</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 = [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]) {
          let temp = arr[j + 1]
          arr[j + 1] = arr[j]
          arr[j] = temp
        }
      }
    }
    console.log(arr)
    // 升序
    // arr.sort(function(a,b){
    //   return a-b
    // })
  </script>
</body>

</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 num = +prompt('请输入秒数')
    function getTime(num) {
      let h = parseInt(num / 60 / 60 % 24)
      let s = parseInt(num / 60 % 60)
      let m = parseInt(num % 60)
      h = h < 10 ? '0' + h : h
      s = s < 10 ? '0' + s : s
      m = m < 10 ? '0' + m : m
      return `转换之后的时间是：${h}:${s}:${m}`
    }
    document.write(getTime(num))
  </script>
</body>

</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 fun = function (x, y) {
      document.write(x + y)
    }
    fun(1, 2);

    (function (x, y, z) {
      document.write(x + y + z)
    })(1, 2, 3);

    (function () { document.write(55) }())

  </script>
</body>

</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>
    function getArrM(arr = []) {
      let max = arr[0]
      let min = arr[0]
      for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i]
        }
        // if (arr[i] < min) {
        //   min = arr[i]
        // }
        min = arr[i] < min ? arr[i] : min
      }
      return [max, min]
    }
    let M = getArrM([1, 2, 3, 4])
    alert(M[0])
    alert(M[1])

  </script>
</body>

</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, 12, 34, 1, 4, 5, 67, 99]
    let arrMax = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        arrMax.push(arr[i])
      }
    }
    console.log(arrMax)
  </script>
</body>

</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>
    function add() {
      let sum = 0
      for (let i = 1; i <= 100; i++) {
        sum += i
      }
      alert(sum)
    }
    add()
  </script>
</body>

</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>
    function getSum(num1 = 0, num2 = 0) {
      let sum = num1 + num2
      alert(sum)
    }
    getSum(1, 2)
  </script>
</body>

</html>