计时器 详细介绍

于 2022-10-24 17:20:51 发布
阅读量617 收藏
点赞数
分类专栏： 前端 js 设计模式 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50001396/article/details/127496831
版权

目录

喜欢前端的第一天

以前不怎么喜欢前端，从今天开始对此有了一定深入的了解之后，便慢慢的开始由心而发的一种喜欢。

定时器是什么

定时器的具体方法由Window对象提供，共有以下两种定时器:

  • 延迟执行:指的是指定程序代码在指定时间后被执行，而不是立即被执行。
  • 周期执行:指的是指定程序代码在指定时间为间隔，重复被执行。

目前，HTML页面中多数动态效果，以及动画效果等均由定时器内容完成。

延迟执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟执行</title>
</head>
<body>
<script>
    console.log( 'this is message...' );
    var t=setTimeout( function(){
    console.log( 'this is timeout...' );
    },10000);
    //clearTimeout(t);
    console.log('this is message too.. .' );
</script>

</body>
</html>

setTimeout ( function，delay)方法

作用:

  • 设置一个定时器

参数

  • function -表示延迟执行的代码逻辑
  • delay -表示延迟执行的时间，单位为毫秒

返回值

  • 表示当前定时器的标识

注意:
setTimeout 会打乱代码默认的顺序执行流程

周期执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周期执行</title>
</head>
<body>
<script>
    console.log('this is message...' );
    /*setInterval( function(){
    console.log('this is interval...' );
        },1000);*/
    // function fun(){
    // console.log('this is interval...');
    // setTimeout(fun , 1000);
    // }
    // fun();
    (function fun( ){
    console.log('this is interval...' );
    setTimeout( fun,1000);
    // setTimeout( arguments.callee,1000);
    })();
    console.log('this is message too...' );
</script>
</body>
</html>

setInterval ( function,delay)方法

  • 作用
    设置一个周期执行的定时器

参数

  • function-表示延迟执行的代码逻辑
  • delay -表示延迟执行的时间，单位为毫秒

返回值

  • 表示当前定时器的标识

案例：

HTML5的动画方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5的动画方法</title>
</head>
<body>
<script>
    console.log('this is message...');
    var requestAnimationFrame = webkitRequestAnimationFrame || mozRequestAnimationFrame
    requestAnimationFrame (function(){
    	console.log('this is animation...')
    });
    requestAnimationFrame();
    console.log('this is message too...');
</script>
</body>
</html>

requestAnimationFrame (callback)方法(类似于延迟执行)

作用

  • HTML5新增的动画方法

参数

  • callback - 表示执行动画逻辑的回调函数

返回值

  • 表示当前执行动画的标识

注意 - requestAnimationFrame 具有浏览器兼容问题

cancelAnimationFrame ( animationID)方法

作用

  • 取消由requestAnimationFrame ()方法设定的动画机制

方块自动移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块自动移动</title>
    <style>
        body {
        	margin: 0;
        }
        #box {
	        width: 50px;
	        height: 50px;
	        background-color: lightcoral;
	        position: absolute;
	        top: 300px;
	        left: 100px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById ( 'box' ) ;
    box.addEventListener( 'click' , isMove) ;
    //定义一个标识–表示是停止还是移动
    var flag = false;//表示停止
    var t;
    function isMove() {
        if (!flag) {//如果停止，就移动
            //将标识设置为true - 表示移动
            flag = true;
            move();
        } else {//如果移动，就停止
            flag = false;
            stop();
        }
    }
    function move() {
        //1.获取当前方块的left样式属性值
        var style = window.getComputedStyle(box);
        var left = parseInt(style.left);
        //2.增加left样式属性值
        left++;
        //3.利用内联样式覆盖外联样式
        box.style.left = left + 'px';
        //4.设置定时器
        t = setTimeout(move, 5);
    }
    //实现方块停止逻辑
    function stop(){
    	clearTimeout(t);
    }
</script>
</body>
</html>

小球垂直移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球垂直移动</title>
    <style>
        body {
        	margin: 0;
        }
        .box {
	        width: 50px;
	        height:50px;
	        background-color: lightcoral;
	        border-radius: 25px;
            position: absolute;
            left: 400px;
            top: -50px;
        }
    </style>
</head>
<body>
<!--<div id="box"></div>-->
<script>
    //var box = document.getElementById ( 'box' );
    var body=document.body;
    const WIDTH = window.innerWidth;
    //向页面中创建小球
    function createBox(){
	    var div = document.createElement( 'div') ;
	    div.setAttribute( 'class' , 'box' );
	        var random = Math.random() *(WIDTH-50);
	        div.style.left = random + 'px' ;
	        body .appendChild(div);
    }
    //控制小球向下移动
    function moveDown(){
        var boxs = document.getElementsByClassName ( 'box');
        for (var i=0; i<boxs.length;i++) {
            var box = boxs[i];
            var style = window.getComputedStyle(box);
            var boxTop = parseInt(style.top);
            boxTop += 10;
            box.style.top = boxTop + 'px';
        }
    }
    //createBox();/创建多个小球
    //创建多个小球
    for (var i=0; i<10; i++){
    	createBox();//创建一个小球
    }
    setInterval ( function() {
        moveDown();
    },500);
</script>
</body>
</html>

高度值变化动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度值变化动画</title>
    <style>
        body {
        	margin: 0;
        }
        #menu {
	        width: 100px;
	        height: 300px;
	        border: 1px solid black;
            position: absolute;
            left: 400px;
            top: 100px;
        }
    </style>
</head>
<body>
<div id="menu"></div>
<script>
    //1.获取指定元素
    var menu = document.getElementById ( 'menu' );
    //函数–实现指定元素的高度值减少
    function slideUp(){

    //2.获取指定元素的当前有效样式
    var style = window.getComputedStyle(menu);
        //3.获取指定元素的高度值
    var height=parseInt(style.height);
        //判断当前的高度值是否为o
    if (height <= 0) {
		//将指定元素进行隐藏
        menu.style.display = 'none' ;
        clearTimeout(t)
    } else {
	    //4.减少指定元素的高度值
	    height--;
	    //5.将减少的高度值重新为指定元素进行设置
	    menu.style.height = height + 'px';
	    //6.设置定时器
	    var t = setTimeout(slideUp,5);
    }
}
        slideUp();
</script>

</body>
</html>

键盘控制方块方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘控制方块移动</title>
    <style>
        body {
            margin: 0;
        }
        #box {
            width: 50px;
            height: 50px;
            background-color: coral;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var body = document.body;
        var html = document.documentElement;
        // 获取box的div
        var box = document.getElementById ('box');
        // getComputedStyle() - 指定元素的有效样式
        var boxStyle = window.getComputedStyle(box);
        var boxTop = parseInt(boxStyle.top);
        var boxLeft = parseInt (boxStyle.left);
        // 用于键盘控制方块
        var tUp,tDown,tLeft,tRight;
        body.addEventListener('keydown',function(event){
            var key = event.code;
            console.log(key);
            // 每次键盘事件触发时，重新获取当前的top和left值
            boxTop = parseInt(boxStyle.top);
            boxLeft = parseInt (boxStyle.left);
            switch (key) {
                case 'ArrowUp':
                    moveUp();
                    break;
                case 'ArrowDown' :    
                    moveDown();
                    break;
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
                case 'Space':
                    if (tUp !== undefined) {
                        clearTimeout(tUp);
                    }
                    if (tDown !== undefined) {
                        clearTimeout(tDown);
                    }
                    if (tLeft !== undefined) {
                        clearTimeout(tLeft);
                    }
                    if (tRight !== undefined) {
                        clearTimeout(tRight);
                    }
                    break;
            }
        });
        function moveUp(){
            // 先自减 ， 再赋值
            box.style.top = (--boxTop) + 'px';
            tUp = setTimeout(moveUp,5);
            if (tDown !== undefined) {
                clearTimeout(tDown);
            }
            if (tLeft !== undefined) {
                clearTimeout(tLeft);
            }
            if (tRight !== undefined) {
                clearTimeout(tRight);
            }
        }

        function moveDown(){
            box.style.top = (++boxTop) + 'px';
            tDown = setTimeout(moveDown,5);
            if (tUp !== undefined) {
                clearTimeout(tUp);
            }
            if (tLeft !== undefined) {
                clearTimeout(tLeft);
            }
            if (tRight !== undefined) {
                clearTimeout(tRight);
            }
        }

        function moveLeft(){
            box.style.left = (--boxLeft) + 'px';
            tLeft = setTimeout(moveLeft,5);
            if (tUp !== undefined) {
                clearTimeout(tUp);
            }
            if (tDown !== undefined) {
                clearTimeout(tDown);
            }
            if (tRight !== undefined) {
                clearTimeout(tRight);
            }
        }

        function moveRight(){
            box.style.left = (++boxLeft) + 'px';
            tRight = setTimeout(moveRight,5);
            if (tUp !== undefined) {
                clearTimeout(tUp);
            }
            if (tDown !== undefined) {
                clearTimeout(tDown);
            }
            if (tLeft !== undefined) {
                clearTimeout(tLeft);
            }
        }
    </script>
</body>
</html>

今日心情

今日心情

人得学会竭尽全力，但也得接受无能无力。
努力赚钱，努力做到内心强大，努力使自己变得优秀，那些不相干的人，你们算哪块小饼干。

HTML5中新增的动画定时器requestAnimationFrame及其在制作进度条中的应用
PmtxPhp的博客
09-21 199
在实际项目中，我们可以根据具体需求，灵活运用requestAnimationFrame，将其应用于各种场景中，实现更加出色的动画效果。本文将介绍requestAnimationFrame的基本原理，并以制作进度条为例，展示其在实际项目中的应用。此外，requestAnimationFrame还可以与其他动画效果的实现相结合，为用户提供更好的交互体验。自动优化性能：requestAnimationFrame会在浏览器的绘制间隔内自动优化动画的执行，确保动画的流畅性和最佳性能。获取进度条的DOM元素，并使用。
html5定时器绘制图
wulong710的专栏
09-19 294
定时器 setInterval 两秒绘制一个，绘制6个方框 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>脚本</title> <style> canvas { background-color: aqua;
【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
wangdi的游戏社区
01-15 9511
好久没有更新Cocos2d-html5的博文了，这两个月忙着一些比赛，所以就耽误了，嘿嘿，不过关于这个专栏还是有很多章节要写，所以还是慢慢来更新吧。 Schedule，从翻译的角度上来说就是”时间表“，差不多就是一个定时规划，在cocos2d里面使用的场景一般就是比如你想让一个精灵间隔多少次执行什么动画，或者一个场景想延迟多久进行跳转，ok，那么就应该使用这个来实现。下面简单说一下这个用
计时器
yujie的博客
07-15 415
题目描述 实现一个打点计时器，要求 1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1 2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作 3、第一个数需要立即输出 1.setInterval function count(start, end) { console...
游戏计时器 html,Html5游戏中的setInterval与setTimeout
weixin_35255536的博客
05-31 430
在一些特殊的场景中我们可能会需要使用计时器，n秒后执行一段逻辑，或者循环执行一段逻辑。这个时候我们可能首先想到的会是setInterval()或者setTimeout()两个方法。但是使用这两个方法可能会为我们的工程带来隐患。记录如下代码片段:setTimeout(()=>{console.log("1")},0)console.log("2")//打印结果//2//1可能会有部分人和我会有...
python实现简单的计时器功能函数
09-22
下面将详细介绍如何利用Python实现简单计时器功能的函数。 首先，Python的time模块是一个非常基础且常用的模块，它提供了各种与时间相关的操作函数，比如获取当前时间（time.time()），格式化时间输出（time....
沙漏计时器电路原理图
08-09
以下将详细介绍如何设计一个基于电子元器件的沙漏计时器电路原理图。 一、电路基础概念 1. 时基电路：电子沙漏计时器的核心是时基集成电路，如555定时器。555定时器是一种多用途的数字/模拟混合集成电路，能够根据...
在PPT中里加插入倒计时器的详细步骤【带插入倒计时器的PPT】
06-23
详细的介绍了如何在PPT中插入倒计时器的方法，并附有详细的截图步骤！！！此文件中包含了倒计时器的.swf文件，成功插入倒计时器的ppt文件，还有详细说明步骤的文档！ 在PPT中插入swf,为保证播放时每页PPT都播放插入...
库伯勒H37S系列计时器
03-23
H37S系列计时器的详细介绍和使用说明，都可以在其提供的技术文档中找到。这些文档内容详尽，从基本的使用方法到复杂的故障排除，应有尽有。为了便于用户随时查阅，库伯勒公司贴心地提供了在线下载服务。用户只需要...
篮球三十秒 计时电路倒计时器设计报告.pdf
06-16
这份报告详细介绍了计时器的各个方面，包括其功能、设计要求、系统组成、工作原理以及安装与调试过程。以下是对各章节内容的详细阐述： **第一章 计数器概述** 计数器是电子电路中的基本组成部分，它能够记录输入...
Javascript完成html页面定时器设定
08-14
Javascript完成html页面定时器设定
html5如何设置定时效果,怎么用HTML设置一个定时器
weixin_28812943的博客
06-03 1653
用HTML设置一个定时器的方法：首先新建一个html页面，并设置一个按钮；然后给这个按钮绑定一个函数；接着设置一个变量用来保存定时器；最后在function里面写实现代码即可。本文操作环境：windows7系统、html5&&javascript1.8.5版、Dell G3电脑。新建一个html页面，然后设置一个按钮，并且给这个按钮绑定一个函数。比如设置一个函数timer。现在要做...
html5script计时器,JS使用setInterval实现的简单计时器功能示例
weixin_30531707的博客
06-27 254
本文实例讲述了JS使用setInterval实现的简单计时器功能。分享给大家供大家参考，具体如下：使用setInterval实现计时，并且满60秒向分钟进一，满60分钟向小时进一。www.jb51.net JS计时器window.onload = function(){var mm = 0;var ss = 0;var str = '';var timer = setInterval(functi...
HTML5前端教程分享：JavaScript定时器
weixin_34226706的博客
10-19 273
JS的定时器目前有三个：setTimeout、setInterval和setImmediate。定时器也是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执行状态，就会被加入主线程队列。JS定时器非常实用，做动画的肯定都用到过，也是最常用的异步模型之一。有时候一些奇奇怪怪的问题，加一个setTimeout(fn, 0)（以下简写setTim...
HTML5 + JS 定时器 设置简单进度条
weixin_40855199的博客
12-05 977
进度条（0-100）从0开始加载，加到100后重新加载，结合定时器使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;进度条+定时器&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
HTML5计时器
rainforce888的专栏
10-15 663
html: Remove this if you use the .htaccess --> HTML5 Timer for work-relax balance countDownSeconds = 60; var handle = null; //window load function
javascript编写定时器动画
muli
03-02 527
javascript编写定时器动画
HTML DOM setInterval() 方法
zckyyy0926的博客
06-28 379
定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 语法 setInterval(code,millisec[,"lang"]) 参数 描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期
小巧实用的桌面计时器工具介绍
以下将详细探讨桌面计时器管理工具的相关知识点。 首先，桌面计时器管理工具的设计初衷是为了让用户能够在计算机桌面上轻松启动和管理计时任务。这类工具通常体积小巧，对系统资源的占用极低，从而确保不会影响到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bliss小宝

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

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

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

打赏作者

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

抵扣说明：

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

余额充值