精华内容
下载资源
问答
  • 定时器、offset家族

    定时器setInterval

    每隔一段时间执行某个操作一次

    • setInterval() 方法可按照指定的周期(以毫秒计)来调用函数
    • 执行无数次,直到 停止计时器 或 关闭页面
    • 语法:
    let timerID = setInterval( 被执行的函数 ,间隔毫秒数 )
    
    • 声明
      • 1.匿名函数的方式
    setInterval(
    	function () {
    	   console.log('去哪');
    
        }, 1000
        // 1000是毫秒,也就是1秒钟
                )
    

    2.利用封装函数的方法

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <button id="love">你爱我吗?</button>
        <script>
            // 定时器:每隔一段时间执行某个操作一次:闹钟
    
            let loveBtn = document.getElementById('love');
            let timeID;
            loveBtn.onclick = function () {
                // 声明定时器
                // 1.利用匿名函数的方式来声明
                setInterval(
                    function () {
                        console.log('去哪');
    
                    }, 1000
                    // 1000是毫秒,也就是1秒钟
                )
                // 2.利用封装函数的方法
                // timeID 是定时器的编码
                // 如果不想定时器加速,匿名每次设置定时器之前,先清空定时器编码
                clearInterval(timeID);
                timeID = setInterval(love, 1000);
            }
    
            function love() {
                alert('弹出');
    
            }
        </script>
    </body>
    
    </html>
    
    • timeID:就是启动计算器的id
    • 启动:let 定时器id = setTimeout( 被执行的函数 ,倒数毫秒数 )
    • clearInterval(timeID):关闭定时器

    倒计时计时器setTimeout

    <body>
        <button id="boom">
            开始
        </button>
        <div>60</div>
        <script>
            let boom = document.getElementById('boom');
            let timeID;
            let time = document.getElementsByTagName('div')[0];
            let index = 60;
            boom.onclick = function () {
                // 1.用匿名函数
                // timeID =setTimeout(
                //     function(){
                //         console.log('爆炸');
    
                //     },3000
                // )
                clearTimeout(timeID);
                timeID = setTimeout(boomEgg, 60000);
                time.innerHTML = index;
            }
    
            function boomEgg() {
                console.log('炸');
                index--;
            }
        </script>
    </body>
    

    offset家族

    • style.height 和 style.width 获取的是 行内样式表中的 宽和高,行内没有获得的是undefined
    • 真实的 宽度和 高度 offsetHeigth/offsetWidth
      • offsetHeigth = heigth + pading * 2 + border * 2
      • offsetWidth = width + pading * 2 + border * 2
    • 真实的 left 和 top :offsetLeft / offsetTop
    • 元素左上角 原点 距离 父容器 左上角原点的 真实距离
    • 定位父元素 offsetParent
    • 获取的是 最近的定位 父元素
    • 特点:
      • 不带单位
      • 数值类型
      • 只能读取,不能修改 – 如果要修改 就用 行内 样式表 修改 dom.style

    案例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #box {
                width: 120px;
                height: 120px;
                background-color: red;
                position: absolute;
                left: 10px;
            }
    
    
          
        </style>
    </head>
    
    <body>
        <button id="to400">400位置</button>
        <button id="to800">800位置</button>
        <button id="to0">0</button>
        <hr>
        <div id="box"></div>
        
    
        <script>
            // 1.获得需要的元素
            let to400 = document.getElementById('to400');
            let to800 = document.getElementById('to800');
            let box = document.getElementById('box');
            let to0 = document.getElementById('to0');
    
            to0.onclick = function () {
                moveAnimation(box, 0);
            }
            to400.onclick = function () {
                moveAnimation(box, 400);
            }
            to800.onclick = function () {
                moveAnimation(box, 800);
    
            }
    
            // 2.封装动画函数
            function moveAnimation(elm, target) {
                // 3.清空定时器
                clearInterval(elm.timeID);
                // 4.获得当前元素的位置
                let elmLeft = elm.offsetLeft;
                // 5.设置步长
                // 如果是往右走,那么步长为正数
                // 如果是往左走,那么步长为负数
                // 还没有到终点,那就继续走,就是正数
                // 如果已经超过终点,那就需要回头,就是负数
                // 目标     当前
                // target - elmLeft > 0,代表你还没到终点,继续走,正数
                // target - elmLeft < 0,代表你已经超过终点,往回走,负数
                let step = (target - elmLeft) > 0 ? 2 : -2;
    
                // 6.设置定时器
                elm.timeID = setInterval(function () {
                    elmLeft += step;
                    // 7.判断盒子需不需要继续移动
                    // 如果剩余距离大于步长,那么继续走
                    // 如果剩余距离小于步长,那么写死终点,并停止定时器
                    // 剩余距离:目标:-当前-->Math.abs(step)(target-elmLeft)
                    if (Math.abs(target - elmLeft) > Math.abs(step)) {
                        elm.style.left = elmLeft + 'px';
                    } else {
                        // 如果剩余距离小于步长,那么写死终点,并停止定时器
                        elm.style.left = target + 'px';
                        clearInterval(elm.timeID);
                    }
                }, 5);
            }
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    展开全文
  • webAPI中的定时器

    2019-04-17 17:38:43
    //开启定时器 var timeId = setInterval(function () { //修改按钮的内容 5秒后在次发送 count--; btn.value = count+"秒后在次发送"; //判断count是否是0 if(count == 0) { //清除定时器 clearInterval...

    一、BOM中的一些对象:

    • location:

       1.location.href实现页面的跳转;

       2.location.reload()页面刷新;

       3.location.search;

       4.location.hash:锚点;

    • history对象:

        1.页面前进后退;

        2.history.go(num):

         - history.go(1):前进一页

         - history.go(-1):后退一页

       3.history.forward();

       4history.back();

    • navigator:

       1userAgent:查看浏览器版本;

     

     

    二、案例

    1、短信验证注册

    <body>
    
    <input type="button" value="点击发送短信">
    
    <script>
    
    //1. 给按钮注册点击事件
    
    //2. 禁用按钮
    
    //3. 开始定时器,一秒钟修改一次按钮的内容
    
    //4. 当时间变成0了,清除定时器, 启用按钮, 恢复按钮的内容
    
    var btn = document.querySelector("input");
    
    btn.onclick = function () {
    
    var count = 60;
    
    //禁用按钮
    
    btn.disabled = true;
    
    
    
    //开启定时器
    
    var timeId = setInterval(function () {
    
    //修改按钮的内容 5秒后在次发送
    
    count--;
    
    btn.value = count+"秒后在次发送";
    
    
    
    //判断count是否是0
    
    if(count == 0) {
    
    //清除定时器
    
    clearInterval(timeId);
    
    //恢复按钮
    
    btn.disabled = false;
    
    btn.value = "点击发送短信";
    
    }
    
    }, 1000);
    
    };
    
    </script>
    
    </body>

    2、自动跳转

    <body>
      <a href="http://www.baidu.com">注册成功,3秒自动跳转到登录页</a>
      <script>
        var link = document.querySelector('a');
        var time = 3;
        setInterval(function() {
          time--;
          link.innerText = '注册成功,' + time + '秒自动跳转到登录页';
    
          if (time === 0) {
            location.href = link.href;
          }
        }, 1000);
      </script>
    </body>

     

    展开全文
  • 定时器(两种) window 对象给我们提供了 2 个非常好用的方法-定时器。 setTimeout() setInterval() setTimeout() 炸弹定时器 开启定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTimeout()...

    定时器(两种)

    window 对象给我们提供了 2 个非常好用的方法-定时器。

    • setTimeout()

    • setInterval()

    setTimeout() 炸弹定时器

    开启定时器

    语法

    window.setTimeout(调用函数, [延迟的毫秒数]);
    

    setTimeout()这个调用函数我们也称为回调函数 callback

    注意

    1. window 可以省略。
    2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串’函数名()'三种形式。第三种不推荐
    3. 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
    4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
    普通函数是按照代码顺序直接调用。
    
    简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
    例如:定时器中的调用函数,事件处理函数,也是回调函数。
    
    element.onclick = function(){}   或者  element.addEventListener("click", fn);   里面的 函数也是回调函数。
    

    示例代码

    <!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>
    </head>
    
    <body>
        <script>
            // 1. setTimeout 
            // 语法规范:  window.setTimeout(调用函数, 延时时间);
            // 1. 这个window在调用的时候可以省略
            // 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
            // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
            // 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字)
            // 回调函数是一个匿名函数
            // window.setTimeout(function () {
            //     console.log('时间到了');
            // }, 2000);
    
            function callback() {
                console.log('爆炸了');
            }
            callback();
            
            // 回调函数是一个有名函数
            var timer1 = setTimeout(callback, 3000);
            var timer2 = setTimeout(callback, 5000);
            // setTimeout('callback()', 3000); // 我们不提倡这个写法
        </script>
    </body>
    
    </html>
    

    案例:5秒后关闭广告

    在这里插入图片描述

    案例分析

    • 核心思路:5秒之后,就把这个广告隐藏起来
    • 用定时器setTimeout

    示例代码

    <!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>
    </head>
    
    <body>
        <img src="images/ad.jpg" alt="" class="ad">
        <script>
            // 获取要操作的元素
            var ad = document.querySelector('.ad');
            // 开启定时器
            setTimeout(function () {
                ad.style.display = 'none';
            }, 5000)
        </script>
    </body>
    
    </html>
    

    停止定时器

    语法

    window.clearTimeout(timeoutID)
    

    clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。

    注意:

    1. window 可以省略。
    2. 里面的参数就是定时器的标识符 。

    示例代码

    <!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>
    </head>
    <body>
        <button>点击停止定时器</button>
    
        <script>
            var btn = document.querySelector('button');
            // 开启定时器
            var timer = setTimeout(function(){
                console.log('爆炸了');
            } , 5000);
            // 给按钮注册单击事件
            btn.addEventListener('click' , function () {
                // 停止定时器
                clearTimeout(timer);
            });
        </script>
    </body>
    </html>
    

    setInterval()闹钟定时器

    开启定时器

    语法

    window.setInterval(回调函数, [间隔的毫秒数]);
    

    setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

    注意:

    1. window 可以省略。
    2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
    3. 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
    4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
    5. 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

    示例代码

    <!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>
    </head>
    
    <body>
        <script>
            // 1. setInterval 
            // 语法规范:  window.setInterval(调用函数, 延时时间);
            setInterval(function () {
                console.log('继续输出');
            }, 1000);
            // 2. setTimeout  延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
            // 3. setInterval  每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
        </script>
    </body>
    
    </html>
    

    案例:倒计时

    在这里插入图片描述

    案例分析

    • ①这个倒计时是不断变化的,因此需要定时器来自动变化setInterval
    • ②三个黑色盒子里面分别存放时分秒
    • ③三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
    • ④第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
    • ⑤最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题

    示例代码

    <!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-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                margin: 200px;
            }
            
            span {
                display: inline-block;
                width: 40px;
                height: 40px;
                background-color: #333;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
            }
        </style>
    </head>
    
    <body>
        <div>
            <span class="hour">1</span>
            <span class="minute">2</span>
            <span class="second">3</span>
        </div>
        <script>
            // 1. 获取元素 
            var hour = document.querySelector('.hour'); // 小时的黑色盒子
            var minute = document.querySelector('.minute'); // 分钟的黑色盒子
            var second = document.querySelector('.second'); // 秒数的黑色盒子
            var inputTime = +new Date('2021-10-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
            countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 
            // 2. 开启定时器
            setInterval(countDown, 1000);
    
            function countDown() {
                var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
                var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
                var h = parseInt(times / 60 / 60 % 24); //时
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
                var m = parseInt(times / 60 % 60); // 分
                m = m < 10 ? '0' + m : m;
                minute.innerHTML = m;
                var s = parseInt(times % 60); // 当前的秒
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;
            }       
        </script>
    </body>
    
    </html>
    

    补充:给时间补零的函数

    // 给时间补零的函数
    function padZero(n) {
        // if(n < 10) {
        //     return '0' + n
        // } else {
        //     return n
        // }
        // return n < 10 ? '0' + n : n
        // return ('0' + n).slice(-2)
        return ('' + n).padStart(2, '0')
    }
    

    停止定时器

    语法

    window.clearInterval(intervalID);
    

    clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

    注意:

    1. window 可以省略。
    2. 里面的参数就是定时器的标识符 。

    示例代码

    <!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>
    </head>
    
    <body>
        <button class="begin">开启定时器</button>
        <button class="stop">停止定时器</button>
    
        <script>
            var begin = document.querySelector('.begin');
            var stop = document.querySelector('.stop');
            var timer = null; // 全局变量  null是一个空对象
    
            begin.addEventListener('click', function () {
                timer = setInterval(function () {
                    console.log('ni hao ma');
                }, 1000);
            });
            stop.addEventListener('click', function() {
                clearInterval(timer);
            });
        </script>
    </body>
    
    </html>
    

    案例:发送短信倒计时

    点击按钮后,该按钮3秒之内不能再次点击,防止重复发送短信。

    在这里插入图片描述

    案例分析

    • ①按钮点击之后,会禁用 disabledtrue
    • ②同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
    • ③里面秒数是有变化的,因此需要用到定时器
    • ④定义一个变量,在定时器里面,不断递减
    • ⑤如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态。

    示例代码

    <!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-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        手机号码: <input type="number"> <button>发送</button>
        <script>
            // 按钮点击之后,会禁用 disabled 为true 
            // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
            // 里面秒数是有变化的,因此需要用到定时器
            // 定义一个变量,在定时器里面,不断递减
            // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态
            var btn = document.querySelector('button');
            // 全局变量,定义剩下的秒数
            var time = 3; 
            // 注册单击事件
            btn.addEventListener('click', function() {
                // 禁用按钮
                btn.disabled = true;  // 当点击发送后 这个按钮不可以在点击
                // 开启定时器
                var timer = setInterval(function() {
                    // 判断剩余秒数
                    if (time == 0) {
                        // 清除定时器和复原按钮
                        clearInterval(timer);
                        btn.disabled = false;
                        btn.innerHTML = '发送';
                        time = 3;  // 让倒计时也复原为之前的3s
                    } else {
                        btn.innerHTML = '还剩下' + time + '秒';
                        time--;
                    }
                }, 1000);
    
            })
        </script>
    </body>
    
    </html>
    
    展开全文
  • // 防抖方案1:把保存的定时器变量 全局化 : 只要这个元素有定时器.都共用一个变量保存 // let timeId; // 不允许页面存在多个动画(否则需要多个变量) // 💥 防抖方案2:把定时器的变量 私有化 :只有自己...
  • window 对象的两个定时器 setTimeout() setTimeout(function|code, milliseconds, param1, param2, ...) 在指定的毫秒数后会调用函数或计算表达式,只会调用一次;返回值为定时器 ID(数字类型)。 参数: function...

    window 对象的两个定时器

    setTimeout()

    setTimeout(function|code, milliseconds, param1, param2, ...) 在指定的毫秒数后会调用函数或计算表达式,只会调用一次;返回值为定时器 ID(数字类型)。

    参数:

    • function|code 定时器调用的回调函数(可以是匿名函数也可以是命名函数的函数名)或JS代码串(如果JS代码串是函数名则需要加小括号调用,例如:'fun()';这种方式不推荐使用)
    • milliseconds 毫秒值,省略该参数时默认值为 0
    • param1, param2, ... 用于传给回调函数的参数(IE9 以上才支持该参数)

    示例:

    // 1000 毫秒后会弹出一个警告框
    setTimeout(function() {
    	alert('执行了回调函数!')
    }, 1000)
    

    在这里插入图片描述

    setInterval()

    setInterval(function|code, milliseconds, param1, param2, ...) 按照指定的周期(时间以毫秒计)不停的来调用函数或计算表达式,直到使用 clearInterval() 清除了定时器或关闭了浏览器窗口;返回值为定时器 ID。

    参数同 setTimeout()

    示例:

    function kuang() {
    	console.log('打印!')
    }
    // 每隔 1000 毫秒就会在控制台打印信息
    setInterval(kuang, 1000)
    

    在这里插入图片描述
    补充:使用 setTimeout()setInterval() 时可以省略 window 前缀。

    清除定时器的两种方法

    clearTimeout()

    clearTimeout(timeoutID) 用于清除通过 setTimeout() 创建的定时器

    • timeoutID 由 setTimeout() 返回的 ID 值,必要的参数
    <button id="btn">停止</button>
    <script>
      var btn = document.querySelector('#btn')
    
      // 添加点击事件
      btn.addEventListener('click', function() {
        // 清除定时器
        clearTimeout(timer)
      })
    
      // 用来存储定时器 id
      var timer = null
    
      function show() {
        // 存储定时器 id
        timer = setTimeout(function() {
          console.log('打印!')
          // 调用 show 函数
          show()
        }, 1000)
      }
      // 调用 show 函数
      show()
    </script>
    

    在这里插入图片描述

    clearInterval()

    clearInterval(intervalID) 方法可清除 setInterval() 方法创建的定时器

    • intervalID 由 setInterval() 返回的 ID 值,必要的参数
    展开全文
  • Web API

    2019-11-12 10:17:48
    掌握APIWeb API的概念 掌握常见浏览器提供的API的调用方式 能通过Web API开发常见的页面交互功能 能够利用搜索引擎解决问题 typora-copy-images-to: media Web API Web API介绍 API的概念 API(Application ...
  • 排他思想 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">... .col...
  • 文章目录JS-API第5天-BOM练习题一, 定时器练习练习1. 3秒后自动关闭广告练习2. 京东秒杀倒计时牌 一, 定时器练习 练习1. 3秒后自动关闭广告 <body> <img src="images/cj.jpg" alt="" class="ad"> <...
  • WebAPI

    2021-09-17 17:33:58
    文章目录前言一、API 和 WebAPI二、DOM1.事件2.读入数据总结 前言 JS基础阶段和Web API阶段 一、API 和 WebAPI WebAPI 总结: 二、DOM 1.事件 事件分为: 事件源 事件类型 事件处理程序 代码如下(示例): ...
  • 1-setInterval 定时器:某一段代码并不是马上执行,而是隔一段时间执行 setInterval:创建定时器 特点:...WebApi入门第十章(本地存储 localstorage与sessionstorage) 下一章:WebApi入门第十二章(原生轮播图 ) 
  • 这节知识中最重要的是我们的延时器和定时器,但是还有我们的一些细小的知识点需要了解 BOM : 浏览器对象模型,提供了一套操作浏览器的工具 BOM包含的内容很多,但是东西都不太常用,定时器是最重要的 一.window...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,837
精华内容 7,134
关键字:

webapi定时器