JS基础第三课（定时器篇）

原创

申小兮

发布于 2023-04-14 14:54:44

2K0

发布于 2023-04-14 14:54:44

文章被收录于专栏：前端开发基础前端开发基础

一、什么是BOM？

浏览器模型，提供了与浏览器窗口交互的对象，核心对象是window

前面文章提及的alert(),prompt()都属于windows对象方法

二、window对象的常见事件

1、onload

页面加载事件，当文档内容加载完执行该事件

对比例子：

<script>
    var divDom = document.querySelector('divDom')
    console.log(divDom);//输出null
</script>
<div></div>

<script>
    window.onload = function(){
        var divDom = document.querySelector('div')
        console.log(divDom);//输出<div></div>
    }
</script>
<div></div>

2、onresize

调整窗口大小事件

<script>
    window.onresize = function(){
        console.log(window.innerHeight);
        console.log(window.innerWidth);
    }
</script>

三、定时器

1、延时器

延迟多少时间执行setTimeout

<p>请等待2秒</p>
<script>
    //写法一
    function test() {
        alert('执行')
    }
    setTimeout('test()',2000);
    //写法二
    setTimeout(function test(){
        alert('执行')
    },2000)
</script>

2、间隔多少时间去执行setInterval

<p>请等待2秒</p>
<script>
        //写法一
        function test() {
            console.log('执行');
        }
        setInterval('test()',2000);
        //写法二
        setInterval(function test(){
            console.log('执行');
        },2000)
</script>

3、回调函数callback

（1）概念：回调函数其实是一个参数，将这个函数作为参数传到别的函数里面，回调函数是最后执行的

（2）代码例子

<script>
    function A(callback) {
        callback()
        console.log('我是主函数');
    }
    function B() {
        console.log('回调函数');
    }
    function C() {
        console.log('第三个函数');
    }
    A(B)
    C()
</script>

4、清除定时器

<p>请等待</p>
<button class="btn1">清除1</button>
<button class="btn2">清除2</button>
<script>
    var timer1 = setTimeout(function test() {
        alert('执行1')
    },2000)
    var timer2 = setInterval(function test2() {
        console.log('执行2');
    },2000)
    var btn1 = document.querySelector('.btn1')
    btn1.onclick = function(){
        clearTimeout(timer1)
    }
    var btn2 = document.querySelector('.btn2')
    btn2.onclick = function(){
        clearInterval(timer2)
    }
</script>

5、同步和异步

（1）同步：前一个任务做完，再执行下一个任务，程序执行顺序与任务队列是同步的

（2）异步：执行一个任务的时候，还可以同时处理其他任务

（3）同步任务都在主线程上,形成一个执行栈

（4）异步任务是通过回调函数实现，然后放到任务队列（click、onload、定时器）

（5）执行顺序：先执行执行栈的同步任务，异步任务放到任务队列中，执行栈的所有同步任务执行完毕时，才回去按照顺序读取任务队列

<script>
    console.log(1);
    setTimeout(function(){
        console.log(2);
    },100)
    console.log(3);
</script>

四、JS总练习（针对前面章节的总结练习）

英雄联盟点击切图案例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            display: block;
        }
 
        .body {
            background: #f7f8f8;
            overflow: hidden;
            width: 1240px;
            height: 632px;
            margin: auto;
            position: relative;
        }
 
        .banner {
            height: 632px;
            width: 7440px;
            position: absolute;
            left: 0;
            transition: 500ms;
        }
 
        .img1 img {
            width: 1240px;
            height: 632px;
            float: left;
        }
 
        .bottom {
            width: 900px;
            height: 96px;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
 
        .text {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #000;
            font-size: 20px;
            color: #fff;
        }
 
        .img2 {
            right: 0;
            bottom: 0;
            display: flex;
            position: absolute;
        }
 
        .img2 img {
            width: 60px;
            height: 60px;
            float: left;
            box-sizing: border-box;
            opacity: 0.7;
        }
 
        .img2 img:hover{
            opacity: 1 !important;
        }
 
        .active {
            border: 4px solid #00a483;
            opacity: 1 !important;
        }
    </style>
</head>
 
<body>
    <div class="body">
        <div class="banner">
            <div class="img1">
                <img src="https://game.gtimg.cn/images/lol/act/img/skin/big1000.jpg" alt="">
                <img src="https://game.gtimg.cn/images/lol/act/img/skin/big1001.jpg" alt="">
                <img src="https://game.gtimg.cn/images/lol/act/img/skin/big1002.jpg" alt="">
                <img src="https://game.gtimg.cn/images/lol/act/img/skin/big1003.jpg" alt="">
                <img src="https://game.gtimg.cn/images/lol/act/img/skin/big1004.jpg" alt="">
                <img src="https://game.gtimg.cn/images/lol/act/img/skin/big1005.jpg" alt="">
            </div>
        </div>
        <div class="bottom">
            <div class="text">黑暗之女</div>
            <div class="img2">
                <img class="active" index="0" src="https://game.gtimg.cn/images/lol/act/img/skin/small1000.jpg" alt="">
                <img index="1" src="https://game.gtimg.cn/images/lol/act/img/skin/small1001.jpg" alt="">
                <img index="2" src="https://game.gtimg.cn/images/lol/act/img/skin/small1002.jpg" alt="">
                <img index="3" src="https://game.gtimg.cn/images/lol/act/img/skin/small1003.jpg" alt="">
                <img index="4" src="https://game.gtimg.cn/images/lol/act/img/skin/small1004.jpg" alt="">
                <img index="5" src="https://game.gtimg.cn/images/lol/act/img/skin/small1005.jpg" alt="">
            </div>
        </div>
    </div>
    <script>
        var index2 = 0;
        var text = ['黑暗之女', '哥特萝莉 安妮', '小红帽 安妮', '安妮梦游仙境', '舞会公主 安妮', '冰霜烈焰 安妮']
        var bannerDom = document.querySelector('.banner');
        var textDom = document.querySelector('.text');
        var imgDom = document.querySelectorAll('.img2 img');
        for (var i = 0; i < imgDom.length; i++) {
            imgDom[i].setAttribute("index", i);
            imgDom[i].onclick = function(){
                console.log(this.getAttribute("index"));
                var index = this.getAttribute("index");
 
                imgDom[index2].className = "";
                this.className = 'active';
                index2 = index;
                bannerDom.style.left = -1240 * index + "px";
                textDom.innerHTML = text[index];
            };
        }
    </script>
</body>
</html>