JavaScript基础（四）

原创于 2025-11-24 21:10:13 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #笔记 #前端 #css

一，函数

1,1 为什么需要函数

1.2 函数使用

<!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;
        padding: 5px 10px;
        border: 1px solid #d1aeae;
        margin: 2px;
        border-radius: 5px;
        box-shadow: #d1aeae;
      }
    </style>
  </head>
  <body>
    <script>
      function sayHai() {
        console.log('hi~~~')
        // 1. 外层循环控制行数
        for (let i = 1; i <= 9; i++) {
          // 2. 里层循环控制列数
          for (let j = 1; j <= i; j++) {
            document.write(`<span> ${j} X ${i}=${j * i} </span>`)
          }
          // 换行
          document.write('<br>')
        }
      }
      sayHai()
      sayHai()
      sayHai()
    </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>
      // 1. 求两个数的和
      //   function getSum() {
      //     let num1 = +prompt('请输入第一个数')
      //     let num2 = +prompt('请输入第二个数')
      //     console.log(num1 + num2)
      //   }
      //   getSum()
      //   2. 求1~100之间所有数的和
      function getSum() {
        let sum = 0
        for (let i = 1; i <= 100; i++) {
          sum = sum + i
        }
        console.log(sum)
      }
      getSum()
    </script>
  </body>
</html>

1.3 函数传参

<!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. 封装函数
      function getArrSum(arr) {
        // console.log(arr);
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
          sum += arr[i]
        }
        console.log(sum)
      }
      getArrSum([1, 2, 3, 4, 5])
      getArrSum([5, 3, 4, 3545])
    </script>
  </body>
</html>

1.4 函数返回值

<!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.求最大值函数
      //   function getMax(x, y) {
      //     return x > y ? x : y
      //   }
      //   let max = getMax(1, 2)
      //   console.log(max)

      //   2. 求 任意数组的最大值， 并且返回
      function getArrValue(arr = []) {
        // (1)先准备一个max变量存放数组的第一个值
        let max = arr[0]
        let min = arr[0]
        // (2)遍历比较
        for (let i = 1; i < arr.length; i++) {
          // 最大值
          if (max < arr[i]) {
            max = arr[i]
          }
          //   最小值
          if (min > arr[i]) {
            min = arr[i]
          }
        }
        // (3)返回值
        // 返回多个值
        return [max, min]
        // return max
      }
      let newArr = getArrValue([1, 3, 4, 7, 9])
      //把return看成返回之后 生成的  新的 数组
      //   数组从0开始排序  最大值=0  最小值=1
      console.log(`数组的最大值是${newArr[0]}`)
      console.log(`数组的最小值是${newArr[1]}`)
    </script>
  </body>
</html>

1.5 作用域

1,6 匿名函数

1. 函数表达式

. 使用场景

2. 立即使用函数

二，综合案例

<!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 sencond = +prompt('请输入秒数')
      //  2.  封装函数
      function getTime(t) {
        h = parseInt((t / 60 / 60) % 24)
        m = parseInt((t / 60) % 60)
        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(sencond)
      document.write(str)
    </script>
  </body>
</html>

1.逻辑中断

2. 转换为布尔型

作业练习

<script>
      function changeNum(x, y) {
        let temp = x
        x = y
        y = temp
        document.writeln(`第一个值得结果是：${x}<br>第二个值的结果是：${y}`)
      }
      changeNum(1, 2) //在这里调用函数可以为ture中的任意值
    </script>

<script>
      function result() {
        let a = prompt('输入银行卡金额')
        let b = prompt('当月食宿消费金额')
        let c = prompt('当月生活消费金额')
        let d = a - b - c
        return d
      }
      let momey = result()
      document.write(`我的银行卡余额还有${momey}`)
    </script>