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

最新推荐文章于 2024-08-20 19:21:56 发布
最新推荐文章于 2024-08-20 19:21:56 发布
阅读量268 收藏 2
点赞数 4
分类专栏： 前端开发 文章标签： javascript html 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51478745/article/details/125851145
版权

一、什么是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>

具体效果小伙伴可以复制执行代码查看，也可去到官网看切换效果🧐

五秒法则
关注
专栏目录
js 各种定时器实现
07-06
已知的多种方式实现的js定时器功能。支持延缓加载功能。
JS基础-定时器
linqunbin的博客
06-03 746
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
JS---定时器
最新发布
zyt0502的博客
08-20 1917
本篇主要是针对定时器设置和移除方法的介绍以及倒计时案例的介绍
javascript中的定时器入门
weixin_30556161的博客
01-28 158
JavaScript提供定时器（timer）的功能，可以延期执行或重复执行函数或代码段。 window对象提供了三个方法来实现定时器的效果，分别是setTimeout()、setInternal()和requestAnimationFrame()。 定时器是JavaScript动画的核心技术。 setTimeout() setTimeout()方法用来指定某个函数或代码段/字符串...
【超详细~】js的三大定时器：setTimeout、setInterval、requestAnimationFrame
热门推荐
鱼骨编程
04-08 24万+
js三大定时器！进行了一个简短的总结
JavaScript(3) 定时器(setTimeout，setInterval)
郑清
10-18 234
一次性定时器 setTimeout <script> function show(){ alert("广告广告。。。"); } setTimeout("show()",1000);//一次性定时器 1秒后出现 弹框 //var id = setTimeout("show()",1000);...
js页面显示多个定时器
08-21
在JavaScript中，定时器是实现延迟执行或周期性任务的关键工具。它们可以帮助我们在网页加载后，在特定的时间点执行代码，或者每隔一定时间重复执行某个功能。本知识点将深入探讨JavaScript中的定时器及其在页面上...
BOM系列第二篇之定时器requestAnimationFrame
11-22
JavaScript中的定时器是实现动态效果和动画的基础，其中`requestAnimationFrame`是专为动画设计的高性能定时器。本文主要探讨`requestAnimationFrame`的工作原理、特点、使用方式以及兼容性问题，并通过实例比较其与...
BOM系列第一篇之定时器setTimeout和setInterval
09-01
在BOM系列的第一篇中，我们重点关注的是定时器`setTimeout`和`setInterval`，这两个方法是JavaScript中处理异步编程的重要工具。 `setTimeout`方法允许我们在指定的毫秒数之后执行一个函数或字符串。它接受两个主要...
JavaScript进阶教程(第三课第二部分)第1/2页
10-30
在JavaScript进阶教程的第三课第二部分中，我们主要探讨了如何使用定时器进行循环调用，以及如何管理和取消这些定时器。JavaScript的定时器功能是通过`setTimeout()`和`clearTimeout()`函数来实现的。 首先，我们来...
Javascript定时器 三 setTimeout func 0
09-25
Javascript定时器 三 setTimeout func 0
JS三大计时器
XUYIGE的博客
01-31 1182
JS三种计时器：（异步） 1、一次性计时器 setTimeout 2、循环计时器 setInterval 3、按照电脑的刷新频率执行 默认的时间：1000/60 有兼容性写法 前两种计时器的时间可以设置 也可以清除计时器 一次性计时器： setTimeout(function(){ //function是回调函数 console.log(1); //1秒后执行 },1000) f...
浅析javascript三种定时器原理和异同
十九万里的博客
06-13 2479
念念不忘 必有回想 前言 众所周知js定时器有两种 setTimeout和setInterval 还有一个新增的requeTanimationFrame（动画API）也被加入到了面试经常考察的范围，那么我就从是什么 怎么用，什么时候用，他们的区别是什么来简述一下这三者的关系 1、setTimeout（延时器） setTimeout完整的写法其实是window.setTimeout 是window的一个属性，由于window是全局作用域，通常我们写的时候就省略了 setTimeout()方法用来指定某个函.
JS循环定时器和炸弹定时器
Lvsiwei0719的博客
04-23 3914
1.setinterval（）；循环定时器 setinterval（）；循环定时器：规定时间间隔执行一次，像闹钟一样，不关闭继续执行 setinterval（code，millisec，lang）； Code：必需。要调用的函数或要执行的代码串 Millisec：必需。 Lang：可选。 2.setTimeout（）；炸弹定时器 setTimeout（）；炸弹定时器：只执行一次，不能执行下一次了 ...
js中定时器setTimeout和setInterval两种定时器
qq_33358062的博客
04-13 842
项目中，经常会用到定时器来实现数据实时更新、时间等，简单总结一下： Javascript中的定时器有两种，setInterval和setTimeout，而定时器的作用就是延迟执行。 一、定时器的写法 setInterval(expression,milliseconds)； setTimeout(expression,milliseconds)； 上式中，
JS定时器
gaoshanyangzhi_1999的博客
08-01 972
定时器 日期对象 创建Date对象语法 var date = new Date(); Date对象常用方法 var date = new Date;//时刻记录，记录创建时刻，非实时 console.log(date.getDate());//返回日期月份中的天数（1-31） console.log(date.getDay());/...
js定时器
gghhm的博客
05-22 1172
js定时器 js的定时器主要是分为三种：单词定时器、循环/多次定时器、删除定时器 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> ...
JavaScript之定时器
weixin_47740096的博客
06-29 2284
js之定时器
JavaScript基础精讲：正则、call/apply及定时器应用
"这篇资源是关于JavaScript基础知识的深入讲解，特别是对正则表达式、函数调用方式（call()和apply()）、arguments对象的属性（callee和caller）、cookie操作以及定时器（setInterval()、clearInterval()、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值