js 的知识

day07函数和定时器

1.回顾

函数:将具有特定功能的代码整合在一起 并命名
特性:提高代码的复用率
​
函数的使用场景
     事件处理函数中  标签.事件类型 = function(){}
   对象的方法中    { “skill”:function(){} }
   代码复用封装中
    声明函数:普通函数声明  funtion 函数名(){}   表达式函数声明 var 变量名 = function(){}
    使用函数:函数名()
    
    参数:
       function  函数名(形参1,形参2....){
       
       }
       
       函数名(实参1,实参2....)
       
       //如果参数的个数不确定的时候 arguments 参数的集合 arguments[下标] length
       
       作用域
            局部作用域  全局作用域
            全局变量/函数
                    在函数外生命的变量和函数,可以在任何地方访问和修改,直到页面关闭会被销毁
            局部变量/函数
                    在函数内生命的变量和函数  只能在函数内部使用,出了函数就会被销毁
       作用域链
                js的一种查找机制,先找自身作用域,依次往父级作用域查找,直到查找到全局,如果全局也找不到 xxx is not defined
        
        预解析(变量提升)
                1.先找var和funtion
                        先找var 只看等号左边的声明变量  如果重名 只会声明一次
                        再去找function 将整个函数提前声明 如果函数重名 会声明多次
                2.逐行执行
                        只看赋值

2.函数

2.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 () { };
        }

2.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
            }

2.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"))

2.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>

3.定时器

3.1定时器的分类

  • 延时定时器

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

    • 使用场景:广告弹窗

  • 间歇定时器

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

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

3.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>

3.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>

3.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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript知识体系涵盖了以下几个主要方面: 1. 基础语法和数据类型:包括变量、常量、运算符、控制流等基本语法和基本数据类型(如数字、字符串、布尔值等)的使用。 2. 数据结构:了解和使用数组、对象、集合、映射等数据结构,以及它们的常见操作和方法。 3. 函数和作用域:学习函数的定义、调用、参数传递、返回值等相关知识,了解作用域链、闭包等概念。 4. 异步编程:掌握回调函数、Promise、async/await等异步编程的方式,处理异步操作和事件驱动的场景。 5. DOM操作:了解DOM树的组成和结构,学习使用JavaScript操作DOM元素,实现页面交互和动态更新。 6. 事件处理:掌握事件的绑定、事件冒泡、事件委托等概念和技巧,实现对用户操作的响应。 7. AJAX与HTTP请求:学习使用XMLHttpRequest或fetch API发送HTTP请求,并处理服务器返回的数据。 8. 浏览器存储:了解Cookie、localStorage和sessionStorage等浏览器存储机制,实现数据的存储和读取。 9. 错误处理和调试:学习处理运行时错误、调试技巧和工具的使用,提高代码的健壮性和可维护性。 10. ES6+新特性:熟悉ES6及其之后版本的新增语法和功能,如箭头函数、模块化、解构赋值等。 此外,还可以进一步学习JavaScript的前端框架(如React、Vue等)、后端开发(如Node.js)和移动端开发(如React Native、Ionic等),以及与其他技术栈的整合和应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值