JS(函数返回值、获取非行间样式、函数封装、函数复用、定时器)

// 函数返回值

        // 什么时候需要用：函数外想要使用内部的数据的时候

        // 语法： return 返回值

       

        // 1.返回回函数里的值

        function fun1 (){

            var a = 1;

            return a;

        }

        fun1//不加括号是调用整个函数fun1；

        console.log(fun1);//fun1里的fun2

        fun1()//加括号是接收返回值（可以给他var一个变量名）

        console.log(fun1());//fun2里的a

        // var b = fun1();

        // console.log(b);

        // 2.返回函数里的函数

        function fun1(){

            function fun2(){

                var a = 2;

            }

            return fun2;

        }

        var c = fun1;//fun里的fun2

        console.log(c);

        var d = fun1();//fun里的a

        console.log(d);

        // 3.return一次只能返回一个值，写多个只返回最后一个；

        // 4.return有返回值的作用，还有结束函数的作用，所以return放在函数的最后

        // 5.返回值的类型可以是任意数据类型

// 获取非行间样式

        // 获取:  标签.style.样式名

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

 

        // 1.标准浏览器(谷歌、苹果、欧朋、苹果、IE（9+）)

        //   window.get Computed Style("标签").样式名

        // console.log(window.getComputedStyle(oDiv).borderRadius);//50%

        // console.log(window.getComputedStyle(oDiv).backgroundColor);//rgb.....

        // 2.IE低版本浏览器(IE 8-)

        //   标签.current Style.样式名

        // console.log(oDiv.currentStyle.backgroundColor);//rgb...

        // console.log(oDiv.currentStyle.borderRadius);//50%

        // 3.兼容  

        //   标准浏览器： window.getComputed  

        //   IE低版本浏览器：标签.currentStyle

        console.log(window.getComputedStyle);

        // 标准浏览器输出：ƒ getComputedStyle() { [native code] }

        // IE低版本浏览器：undefind

        console.log(oDiv.currentstyle);

        // 标准浏览器输出:undefined

        // IE低版本浏览器：[object Object]

        // 4.判断是运行在标准浏览器，还是IE低版本浏览器

        if(window.getComputedStyle){

            console.log("标准浏览器")

        }else{

            console.log("IE低版本浏览器")

        }

        if(oDiv.currentstyle){

            console.log("IE低版本浏览器")

        }else{e

            console.log("标准浏览器")

        }

        // 5.函数封装

        //   步骤：声明一个函数  将主要代码放入到这个函数中

        //         找函数中可变的量作为参数

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

        // elem(标签名)    attr（样式名）

        // attr是字符串，要加[]

        function getStyle (elem,atttr){

            if(window.getComputedStyle){

            return window.getComputedStyle(elem)[attr];

            }else{

            return elem.currentStyle[attr];

            }

        }

        getStyle(oDiv,"backgroundColor");

//代码复用

        //什么时候使用：结构一致，功能也一样；、

        //实 现 步 骤：1.先当成一组去实现，里面的标签通过父元素获取

        //            2.先实现一组的功能

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

        //            4.调用测试

 

        // 获取父元素

        var oLi = document.getElementsByTagName("li")[0];

 

        // 1.通过父元素获取标签

        var btn = oLi.getElementsByTagName("button");

        var oSpan = oLi.getElementsByTagName("span");

        // 2.先实现一组功能

        // 点击+（span[0]加1,span[2]=span[0]*span[1]）

        btn[1].οnclick=function(){

            oSpan[0].innerHTML++;//++会隐式转化所以不用转parsefloat

            oSpan[2].innerHTML=(oSpan[0].innerHTML*oSpan[1].innerHTML).toFixed(2);

        }

        //点击-

        btn[0].οnclick=function(){

            oSpan[0].innerHTML--;//++会隐式转化所以不用转parsefloat

            if(oSpan[0].innerHTML<0)oSpan[0].innerHTML=0;

            oSpan[2].innerHTML=(oSpan[0].innerHTML*oSpan[1].innerHTML).toFixed(2);

        }

// 延时定时器

        // 语   法：setTimeout( function(){},时间 )

        // 时间单位：ms（毫秒）1000ms=1s

        // 1.基础用法

        setTimeout(function (){

                console.log(1);

            },1000)

       

        // 2.可以提前声明函数

        function fun1(){

            console.log(2)

        }

        setTimeout(fun1,2000)

        // 3.在定时器中 this指向window

        setTimeout(function(){

            console.log(this);//window

        },3000)

//间歇定时器

        //语法：setinterval( function(){},时间 )

        // 1.基础用法

        setInterval(function (){

                console.log(1);

            },1000)

        // 2.可以提前声明函数

        function fun1(){

            console.log(2)

        }

        setInterval(fun1,2000)

        // 3.在setInterval中 this指向window

        setInterval(function(){

            console.log(this);//window

        },3000)

// 清除定时器

        // setTimeout(延时定时器 会自动清除定时器)

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

        // 语法：clearTimeout(定时器ID)

        //       clearInterval(定时器ID)

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