JavaScript（七）

最新推荐文章于 2023-11-01 16:02:34 发布

snowyfly

最新推荐文章于 2023-11-01 16:02:34 发布

阅读量73

点赞数

文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/snowyfly/article/details/126612230

版权

定时器和函数封装

1.2 获取非行间样式

1.2.1获取行间样式

标签.style.样式名如果样式名是-链接使用驼峰命名例如font-size fontSize
- ==标签.style.样式名只能获取行间样式==

 // 1.获取行间样式
        // 标签.style.样式名   只能获取行间样式
        var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv.style.color);// "pink"
        console.log(oDiv.style.width);//""

1.2.2获取非行间样式和行间样式

标准浏览器(火狐谷歌欧朋 safari IE(9-11))
- window.getComputedStyle(标签).样式名

// 标准浏览器  window.getComputedStyle(标签).样式名
        var w =   window.getComputedStyle(oDiv).width;
        console.log(w);// 300px

        var h = window.getComputedStyle(oDiv).height;
        console.log(h);// 300px


        var bgcolor = window.getComputedStyle(oDiv).backgroundColor
        console.log(bgcolor);//rgb(255, 0, 0)


        var color = window.getComputedStyle(oDiv).color;
        console.log(color);// rgb(255, 192, 203)

        var ftsize = window.getComputedStyle(oDiv).fontSize;
        console.log(ftsize);//50px

IE低版本浏览器(IE5-8)
- 标签.currentStyle.样式名

// IE低版本  标签.currentStyle.样式名
        var w1 = oDiv.currentStyle.width;
        console.log(w1);// 300px

        var h1 = oDiv.currentStyle.height;
        console.log(h1);// 300px

        var bgcolor1 = oDiv.currentStyle.backgroundColor;
        console.log(bgcolor1);// red

        var color1 = oDiv.currentStyle.color;
        console.log(color1);// pink
        
        var ftsize1 = oDiv.currentStyle.fontSize;
        console.log(ftsize1);// 50px

兼容
- 判断方法1 window.getComputedStyle这个方法是否存在

        // 1.判断浏览器  判断用户是运行在标准浏览器 还是IE低版本浏览器
        /* 
            标准浏览器(谷歌 火狐 欧朋 safari ie(9-11))   window.getComputedStyle.样式名
            IE低版本(ie5-8)     标签.currentStyle.样式名
             window.getComputedStyle //这是js内置的一个方法(函数)
        */
        console.log(window.getComputedStyle);//标准浏览器输出  ƒ getComputedStyle() { [native code] }   IE低版本浏览器  undefined
        console.log(Boolean(window.getComputedStyle));// true
        console.log(Boolean(undefined));//false

        //判断方法1  window可以省略  但是作为判断条件的时候不能省略
        if (window.getComputedStyle) {//true 会隐式转换成布尔类型
            console.log("标准浏览器")
            var w = window.getComputedStyle(oDiv).width;
            console.log(w)
        } else {//false  
            console.log("IE低版本浏览器");
            var w = oDiv.currentStyle.width;
            console.log(w);
        }

判断方法2 判断标签.currentStyle 这个方法是否存在

<script>
        var oDiv = document.getElementsByTagName("div")[0];
        /* 
            标准浏览器(谷歌 火狐 欧朋 safari ie(9-11))   window.getComputedStyle.样式名
            IE低版本(ie5-8)     标签.currentStyle.样式名
        */   

        //判断方法2
        console.log(oDiv.currentStyle)//IE低版本输出 [object Object] 标准浏览器undefined
        if(oDiv.currentStyle){//true  IE低版本浏览器
            console.log("IE低版本")
            var w = oDiv.currentStyle.width;
            console.log(w);
        }else{//false  标准浏览器
            console.log("标准浏览器")
            var w = window.getComputedStyle(oDiv).width;
            console.log(w);
        }
    </script>

2.函数封装与代码复用

2.1 函数封装

函数封装的步骤

声明一个函数把主要代码放进去
找函数中可变的值作为参数将参数带入函数中并且返回出去
调用调试

<body>
    <div style="color:pink;font-size: 50px;"></div>
    <p style="width:500px"></p>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        /* 
            函数封装
                1.声明一个函数  把主要代码放进去
                2.找函数中可变的值作为参数 将参数带入函数中 并且返回出去
                3.调用调试
        */

        function getStyle(elem, attr) { //elem 标签元素  attr是样式名
            // 1.判断浏览器
            if (window.getComputedStyle) {//true 标准浏览器
                var w = window.getComputedStyle(elem)[attr];
                return w
            } else {//false IE浏览器
                var w = elem.currentStyle[attr];
                return w;
            }
        }
        //获取div的样式
        var a = getStyle(oDiv, "width");
        console.log(a);//300px

        var b = getStyle(oDiv, "height")
        console.log(b);//300px

        //获取p的样式
        var oP = document.getElementsByTagName("p")[0];
        var a1 = getStyle(oP, "width");
        console.log(a1);//500px
    </script>

2.2 代码复用

什么时候使用代码复用
- 功能一样结构一样的使用用for循环不好实现的时候
代码复用的实现步骤
- 把这个功能先当成一组去实现里面的标签都是通过父元素获取
- 先去实现一组的功能
- 把这一组功能放入到函数中把父元素作为参数
- 调用测试

<script>
        /*
            - 把这个功能先当成一组去实现  里面的标签都是通过父元素获取
            - 先去实现一组的功能
            - 把这一组功能放入到函数中  把父元素作为参数
            - 调用测试
        */
        //1.获取元素
        var list = document.getElementsByTagName("li");

        // //第一个li
        // add(list[0])
        // add(list[1])
        // add(list[2])
        // add(list[3])
        for (var i = 0; i < list.length; i++) {
            add(list[i]);
        }

        // 5.声明一个函数
        function add(parent) {
            //2.通过父元素获取li里面的标签
            var btn = parent.getElementsByTagName("button");
            var oSpan = parent.getElementsByTagName("span");

            // 3.点击+
            btn[1].onclick = function () {
                // 只要是从页面获取内容都是string类型
                oSpan[0].innerHTML++;// ++ 会自动隐式转换
                // oSpan[0].innerHTML =  Number(oSpan[0].innerHTML)+1  + 不会隐式转换
                oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2)
            }
            // 4.点击-
            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>

3.定时器

3.1 定时器介绍

定时器的分类
- 延时定时器
  - 语法: setTimeout(函数，时间)
  - 作用：延迟一定的时间再去执行函数里面的代码，只会执行一次
  - 使用场景：广告弹窗
- 间歇定时器
  - 语法：setInterval(函数，时间)
  - 作用：每隔一定的时间就去执行函数中的代码会执行多次
  - 使用场景：轮播图倒计时计时器抽奖
==注意:定时器的时间单位是ms 1s = 1000ms==

3.2 延时定时器

setTimeout(函数,时间)

 <script>
        // 1.延时定时器
        console.log("开始");
        setTimeout(function(){
            console.log("3秒之后才会执行这里的代码")
        },3000)

        // 2.广告弹窗  3秒之后开始显示广告弹窗
        var oDiv = document.getElementsByTagName("div")[0];

        setTimeout(function(){
          oDiv.style.display = "block";
        },3000)

        // 3.定时器中的函数可以提前定义
        setTimeout(fn1,3000);

        function fn1(){
            console.log("你一会输出123");
        }
        
    </script>

3.3 间歇定时器

setInterval(函数,时间)

<body>
    <div>0</div>
    <script>
        // 1.间歇定时器
        setInterval(function () {
            console.log("我隔一会就执行")
        }, 3000)

        // 2.函数可以提前定义
        function fn1() {
            console.log(123);
        }
        setInterval(fn1, 3000);

        // 3.页面数字累加  每隔1秒+1;
        var oDiv = document.getElementsByTagName("div")[0];
        setInterval(function () {
            oDiv.innerHTML++;
        }, 1000)
    </script>
</body>

3.4 同步和异步

代码的执行顺序

 <script>
        /* 
            同步执行:在做一件事情的时候 如果这件事没有做完，后面的代码就只能等待
                同步执行  alert()  for
            异步执行：在做一件事情的时候 如果这件事需要花费一定的时间 会先执行后面的代码，然后再回头执行处理这件事
        */
        
        //同步执行
        alert("提示");
        console.log(123);
        for(var i = 0;i<10000;i++){

        }
        console.log(456)

        // 异步执行 setTimeout就是一个异步执行 无论时间是多少
        console.log("开始");
        setTimeout(function(){
            console.log(123);
        },0)
        console.log("结束")
    </script>

3.5清除定时器

定时器一旦开始就不会自动结束,必须手动清除
- clearTimeout(定时器id) 手动清除延时定时器(很少用)
- clearInterval(定时器id) 手动清除间歇定时器
定时器id: 每一个定时器在开始的时候，js都会返回一个能唯一标识当前定时器的id，默认都是从1开始
定时器一旦停止就没有了，如果后续需要定时器需要再次定义

<body>
    <script>
        // 1 定时器id
        var a =  setInterval(function(){},1000);
        console.log(a);
        var b = setInterval(function(){},1000);
        console.log(b);
        var c = setInterval(function(){},1000);
        console.log(c);

        clearInterval(c);

        // 2.倒计时效果  倒计时是从10开始 到0停止
        var n = 10;
        auto();//为了解决定时器第一次执行的延迟  可以提前调用函数
        function auto(){
            // 将结果显示在页面上    document.body快速获取body标签
            document.body.innerHTML = n;
            
            n--;
            if(n<0){
                clearInterval(timer);//清除定时器
            }

        }
       var timer =  setInterval(auto,1000)
    </script>
</body>