函数和定时器

1.函数

1.1函数返回值

• 什么时候需要函数返回值

  • 函数外想要使用函数内部的变量的时候

• 语法：return 返回值

 //1.什么时候会需要函数返回值  函数外面想使用函数内部的值的时候
        function fun1() {
            var a = 10;
            function fun2() {
                console.log("fun2");
            }
            return a;
        }
        var b = fun1();
        console.log(b);// 10
​
​
​
        // 2.函数返回值  return 返回值
        function fun1() {
            function fun2() {
                console.log("fun2");
            }
            return fun2
        }
        var c = fun1();
        console.log(c);//c = function fun2(){}
        c();

• ==注意事项==

  • 函数中return一次只能返回一个，如果写多个，返回最后一个;

  • 函数中只能有一个return

  • reutrn除了有返回值的作用 还是有结束函数的作用 所以把return放在函数的最后

 // 3.return一次只能返回一个值 如果写多个只能返回最后一个
        function fun3(a, b) {
            //计算a+b  a-b
            var h = a + b;
            var j = a - b;
            // return h,j  只能写法不行 只能返回j
            // reutrn返回多个值  [返回值1,返回值2]  {"和":返回值1,"差"：返回值2}
            // return [h, j];
            return {
                "he": h,
                "cha": j
            }
​
        }
        var res = fun3(20, 30);
        console.log(res);//[50,-10]   {"he":50,"cha":-10}
​
        // 4.return不仅有返回值的作用  还有结束函数的作用  所以把return放在函数的最后
        function fun4() {
            return 20;
            console.log("你就说我执行吗");//不会执行
        }
        var res1 = fun4();
        console.log(res1);
​
        function fun5() {
            return 10;
​
            return 20;//不会执行
        }
        var a = fun5();
        console.log(a);//10

• 返回值的类型 可以是任意数据类型

  // 4.return  返回值  返回值的类型  任何数据类型都可以返回
        function fun6() {
            return "1";
            return 1;
            return null;
            return undefined;
            return [];
            return {};
            return function () { };
        }

1.2获取非行间样式

• 获取行间样式

  • 获取：标签.style.样式名 font-size fontSize

  • 设置：标签.style.样式名 = 值

• 获取非行间样式

  • 标准浏览器(欧朋 火狐 谷歌 safai,IE(9+))

    • window.getComputedStyle(标签).样式名

   //1.标准浏览器  window.getComputedStyle("标签").样式名  所有的样式都可以拿到
          var oDiv = document.getElementsByTagName("div")[0];
          console.log(window.getComputedStyle(oDiv).backgroundColor);//rgb(255, 0, 0)
          console.log(window.getComputedStyle(oDiv).color);//rgb(255, 192, 203)
          console.log(window.getComputedStyle(oDiv).width);//300px
          console.log(window.getComputedStyle(oDiv).height);//300px

  • IE低版本浏览器(IE8-)

    • 标签.currentStyle.样式名

   // 2.IE低版本浏览器 ie8-  标签.currentStyle.样式名   所有的样式都可以拿到
          console.log(oDiv.currentStyle.backgroundColor);//red
          console.log(oDiv.currentStyle.color);//pink
          console.log(oDiv.currentStyle.width);//300px
          console.log(oDiv.currentStyle.height);//300px

  • 兼容

         // 3.兼容  标准浏览器window.getComputed  IE低版本浏览器：标签.currentStyle
          console.log(window.getComputedStyle);// 标准浏览器输出：ƒ getComputedStyle() { [native code] }  IE低版本浏览器：undefined
          console.log(oDiv.currentStyle)//标准浏览器输出undefined  IE低版本浏览器：[object Object]
  ​
          //4.判断是运行在IE低版本浏览器 还是运行在标准浏览器
          if (window.getComputedStyle) {//true
              console.log("标准浏览器")
              window.getComputedStyle(oDiv).backgroundColor
          } else {//false
              console.log("IE低版本浏览器");
              oDiv.currentStyle.backgroundColor
          }
  ​
          if (oDiv.currentStyle) {
              console.log("IE低版本")
              oDiv.currentStyle.backgroundColor
          } else {
              console.log("标准浏览器");
              window.getComputedStyle.backgroundColor
          }

1.3函数封装

• 函数封装步骤

  1. 声明一个函数 将主要代码放入到这个函数中

  2. 找函数中可变的量作为参数

  3. 将参数代入到函数中 然后调用

    function getStyle(elem, attr) { //var attr = "width"
            //elem 获取样式的标签  attr样式名
            if (window.getComputedStyle) {//true 
                // console.log("标准浏览器")
                return window.getComputedStyle(elem)[attr];
​
            } else {//false
                // console.log("IE低版本浏览器");
                return elem.currentStyle[attr];
            }
        }
​
        var oP = document.getElementsByTagName("p")[0]
        console.log(getStyle(oDiv, "width"))
        console.log(getStyle(oDiv, "height"))
        console.log(getStyle(oP, "width"))

1.4代码复用

• 什么时候使用

  • 结构一致 功能也一样

• 实现步骤

  • 1.把他当成一组去实现,里面的标签通过父元素获取

  • 2.先去实现一组的功能

  • 3.把实现一组的功能放入到函数中 并且把父元素作为参数

  • 4.调用测试

 <ul>
        <li>
            <button>-</button>
            <span>0</span>
            <button>+</button>
            单价: <span>199.99</span>
            小计: <span>0.00</span>
        </li>
    </ul>
    <script>
        var oLi = document.getElementsByTagName("li");
        // cart(oLi[0]);
        // cart(oLi[1]);
        // cart(oLi[2]);
        // cart(oLi[3]);
        // cart(oLi[4]);
        // cart(oLi[5]);
        for (var i = 0; i < oLi.length; i++) {
            cart(oLi[i]);
        }
​
        // 3.把实现一组的功能放入到函数中 并且把父元素作为参数
        function cart(parent) {
            //1.里面的标签必须通过父元素获取
            var btn = parent.getElementsByTagName("button");
            var oSpan = parent.getElementsByTagName("span");
            // 2.实现这一组的功能
            // 点击+
            btn[1].onclick = function () {
                oSpan[0].innerHTML++;//++会隐式转换
                oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2);
            }
            // 点击-
            btn[0].onclick = function () {
                oSpan[0].innerHTML--;
                if (oSpan[0].innerHTML < 0) oSpan[0].innerHTML = 0;
                oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2);
            }
        }
    </script>

2.定时器

2.1定时器的分类

• 延时定时器

  • 语法：setTimeout(function函数,时间)

  • 使用场景：广告弹窗

• 间歇定时器

  • 语法：setInterval(function函数,时间)

  • 使用场景：轮播图 倒计时 计时器 抽奖

2.2延时定时器/setTimeout

 <script>
        //1.setTimeout(function(){},时间)  时间单位是ms(毫秒)  1000ms = 1s
        //1.基础用法
        setTimeout(function () {
            console.log(1);
        }, 1000)
​
        // 2.function函数可以提前声明
        function fun1() {
            console.log(2);
        }
        setTimeout(fun1, 2000)
​
        // 3.在定时器中 this指向window
        setTimeout(function () {
            console.log(this);//window
        }, 1000)
    </script>

2.3间歇定时器/setInterval

<script>
        //间歇定时器：setInterval(function(){},时间)
        //1.基础语法
        setInterval(function () {
            console.log(1)
        }, 1000)
​
        // 2.可以将函数提前声明
        setInterval(fun1, 1000)
        function fun1() {
            console.log(2);
        }
        // 3.setInterval中this  指向window
        setInterval(function () {
            console.log(this)//window
        }, 1000)
    </script>

2.4清除定时器

• setTimeout 延时定时器 会自动清除定时器

• setInterval 定时器一旦开启就不会自动结束 必须手动清除

• 语法：clearTimeout(定时器id) clearInterval(定时器id)

• 定时器id：每一个定时器在开启的时候都会返回一个唯一能标识当前定时器的id，id是从1开始的

 <script>
        var a = setInterval(function () { }, 1000);
        console.log(a);//1
        var b = setInterval(function () { }, 1000);
        console.log(b);//2
        var c = setTimeout(function () { }, 3000);
        console.log(c);//3
        clearInterval(a);
        clearInterval(b);
        clearTimeout(c);
​
    </script>