1.函数的定义：封装特定功能的代码块


function 函数名(){ code}

2.如何定义一个函数：

function go{}{ (console.log”hello”)}

3.如何调用函数：go();

1.绑定事件

  1. <div>
  2.     <!-- 监听器 -->
  3.     <input type="text" name="" id="num1">+<input type="text" name="" id="num2">
  4.       =<input type="text" name="" id="sum">
  5.     <p>
  6.         <button onclick="add()">输出</button>
  7.     </p>
  8. </div>
  9.     <script>
  11.         function add(){
  12.             // 获取元素节点
  13.             var $num1 =document.getElementById('num1')
  14.             var $num2 =document.getElementById('num2')
  15.             var $sum =document.getElementById('sum')
  16.             //获取元素值
  17.             var num1 =$num1.value
  18.             var num2 =$num2.value
  19.             var sum =Number(num1)+Number(num2)
  20.             $sum.value = sum
  21.         }
  23.     </script>

2.函数传参

  1. <script>
  3.         //任意两个数相加的功能、()用来放变量
  4.         //参数为形参
  5.         function add (num1, num2){
  7.                 var sum = num1 + num2
  8.                 console.log(sum)
  9.         }
  10.         //参数为实参
  11.         add(2,3)
  14.         // 任意两个数累加
  15.         function add1(a,b){
  16.             var sum =0;
  17.             for (var i = a; i<=b; i++){
  18.                 sum +=i
  19.             }
  20.             console.log(sum)
  21.         }
  22.          add1(20,80)
  24.     </script>

3.函数返回值

  1. <script>
  3.         function add (a,b){
  4.             var sum = a+b
  5.             return sum
  6.         }                        
  7.         var aa = add (10,20)
  8.         document.write(aa)
  12.         function count(a,b){
  13.             var sum = 0
  14.             for (var i=a; i<b; i++){
  15.                 sum+=i 
  16.             }
  17.             return sum
  18.         }
  19.         var arr =[]
  20.         var a = count(1,10)
  21.         var b = count(2,20)
  22.         var c = count(3,30)
  23.         arr[0]=a
  24.         arr[1]=b
  25.         arr[2]=c
  26.         console.log(arr)
  27.     </script>

2&3结合

  1.          function add(a,b){
  2.             // 获取元素节点
  3.             var $num1 =document.getElementById('num1')
  4.             var $num2 =document.getElementById('num2')
  5.             var $sss =document.getElementById('sss')
  6.             //获取元素值
  7.             var a =Number($num1.value)
  8.             var b =Number($num2.value)
  9.             var sum = 0
  10.             for (var i=a; i<=b;i++){
  11.                 sum += i
  12.                 $sum = sum
  13.             }
  14.             $sss.value = $sum
  15.         }

4.函数提前声明

  1. <script>
  2.         //函数声明提前
  3.         add(a,b)
  4.         function add(a,b){
  5.             var sum = a+ b
  6.             console.log(sum)
  7.         }
  9.         //变量需要先声明后使用
  10.         //变量声明提前，然后在赋值
  11.         alert(num)
  12.         console.log(222)
  13.         var num = 100
  14.         alert(num)
  17.     </script>

作用域

  1. //在window下声明的，所以他们是变量
  2.         //要分先后顺序
  3.         //函数内部可以访问外部
  4.         //函数外不能访问内部    
  5.         //

作业:

  1. 使用函数的方式重写电影列表页面, 同时加上轮播图
  2. 编写一个计算器(eval 用来计算)
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  10. </head>
  12. <body>
  13.     <div class="swiper-container">
  14.         <div class="swiper-wrapper">
  15.             <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/2fd9cd71b8b73608d28d38435f45ed48.jpg" alt=""></div>
  16.             <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/b43a16925b3c56107bec4b866a2623ca.jpg" /></div>
  17.         </div>
  18.         <!-- 如果需要分页器 -->
  19.         <div class="swiper-pagination"></div>
  20.     </div>
  23.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  24.     <script>
  25.         var mySwiper = new Swiper('.swiper-container', {
  26.             loop: true, // 循环模式选项
  28.             // 如果需要分页器
  29.             pagination: {
  30.                 el: '.swiper-pagination',
  31.             },
  32.         })
  33.     </script>
  34. </body>
  36. </html>