定时器与函数封装

最新推荐文章于 2024-06-19 13:38:32 发布
最新推荐文章于 2024-06-19 13:38:32 发布
阅读量1.2k 收藏 3
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LuckyGirl_L/article/details/103621806
本文介绍了JavaScript中的定时器，包括setTimeout和setInterval的使用，以及如何清除定时器。详细讲解了定时器在广告展示和轮播图场景中的应用，并展示了如何封装一个运动框架，实现点击按钮让div移动的功能。此外，还详细阐述了轮播图的实现，包括html布局、css样式以及自动循环播放、鼠标交互和圆圈切换图片等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

定时器与函数封装

1.定时器的分类

（1）setTimeout延迟执行：延迟某个特定的时间开始执行，只执行一次。

​ 语法：setTimeout（函数，间隔时间（ms））

​ 场景：一般用于广告

（2）setInterval间歇执行（或重复执行）：隔某个时间就执行一次，执行无数次。

​ 语法：setInterval（函数，间隔时间（ms））

​ 场景：一般用于轮播图和倒计时。

2.定时器的简单使用
setTimeout：延迟执行一次
setTimeout(function(){},3000);  隔3秒函数一次
//广告 图片显示5s，自动消失
var oImg = document.getElementsByTagName("img")[0];
setTimeout(function () {
    oImg.style.display = "none";
},5000);   

setInterval:间歇执行
setInterval(function(){},3000);  每隔3秒执行一次函数
var oImg = document.getElementsByTagName("img")[0];
var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
var n = 0;
setInterval(function () {
    n++;
    if(n == 4)n=0;
    oImg.src = arr[n];//0 1 2 3
},1000);
3.定时器的清除

定时器一旦开启，就不会自动停止，停止定时器我们需要使用clear，不同的定时器有不同的清除方式。

语法：clearInterval（intervalId）;

​ clearTimeout（intervalId）;（基本上用不上）

注意：停止的是定时器下一次的执行

intervalId：它是一个number数值，开启定时器的时候，会返回唯一一个能标识当前定时器的id，一般是从1开始 1 2 3 4。

var n = 10;
var timer = setInterval(function () {//定义一个变量，接受定时器的id
    n--;
    if(n <= 0){
        n = 0;
        //停止定时器
        clearInterval(timer);
    }
    document.body.innerHTML = n;
},1000);

定时器的应用

 //setTimeout的应用----讨厌的广告，点击一次按钮关闭一次广告
<style>
        .box{
            position:relative;
            width:400px;
            
        }
        button{
            position:absolute;
            right:0;
        }
    
    </style>
     <div class="box" style="display:none;">
        <button>X</button>
        <img src="img/tan.png" alt="#" >
    </div>
    <script>
        var oBox=document.getElementsByTagName("div")[0];
        var oBtn=document.getElementsByTagName("button")[0];
        var oImg=document.getElementsByTagName("img")[0];
        var xianshi=function(){
            oBox.style.display="block";    
        };
       //广告2秒出现一次
        setTimeout(xianshi,2000);
       //点击按钮关闭广告，隔两秒广告再出来
        oBtn.onclick=function(){
            oBox.style.display="none";
            setTimeout(xianshi,2000);
        }    
    </script>

//setInterval的应用----倒计时
<style>
        .box{
            width:300px;
            height:300px;
            margin:100px auto;
            font:bold 40px/300px "微软雅黑";
        }
    
    </style>
    <div class="box">
        <span>10</span>
    </div>
    <script>
        var oDiv=document.getElementsByTagName("div")[0];
        var oSpan=document.getElementsByTagName("span")[0];
        //点击倒计时开始
        oDiv.onclick = function(){
           var n=11;
           var timeOver= setInterval(function change(){
            n--;
            //当n=0时，关闭定时器
            if(n==0){
               clearInterval(timeOver);
            }
            oSpan.innerHTML=n;
        },1000);
        }
        
    </script>
4.封装运动框架

a.点击按钮可以让div来回移动

 //div盒子的样式
<style>
        div {
            position:absolute;
            left:0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
 </style>
  <button>向前</button>
    <button>向后</button>
    <div></div>
    <script src="js/ujiuye.js"></script>
    <script>
    var oBtn=document.getElementsByTagName("button");
    var oDiv=document.getElementsByTagName("div")[0];
    var timer;
    //点击按钮向前运动
    oBtn[0].onclick = function(){
        clearInterval(timer);//在开启定时器时，先清除之前的定时器，以防叠加
         timer=setInterval(function(){
         var n=parseInt(getStyle(oDiv,"left"))+10;//获取left的当前值，并且每次加10，使用的是之前封装好的getstyle（）函数
           if(n>=1000){
               n=1000;
               clearInterval(timer);//到达1000时，清除定时器
           }
           oDiv.style.left=n+"px";
         }, 30);
    }
    //点击按钮向后运动
    oBtn[1].onclick = function(){
        clearInterval(timer);
         timer=setInterval(function(){
           var n=parseInt(getStyle(oDiv,"left"))-10;
           if(n<=0){
               n=0;
               clearInterval(timer);
           }
           oDiv.style.left=n+"px";
         }, 30);
    }
    
    </script>

b.两个按钮有重复的代码，要进行函数封装

//对于这种只有某个值有变化的函数来说，我们可以将两个函数封装成一个，把不一样的数值作为参数传入，封装思路：
 1.声明一个函数，
 2.把主要代码放入函数中
 3.找可变的值做参数
 4.调用，调试

/* 
* 运动函数
* @param {object}:elem 标签
* @param {string}:attr 属性名
* @param {number}:step 步长（每次的运动距离）
* @param {number}:target 目标值
 */

function move(elem,attr,step,target){
    step =  parseInt(getStyle(elem,attr))< target ? step :-step;
    clearInterval(elem.timer);//自定义属性
    elem.timer = setInterval(function(){ 
        //获取当前值 + 10
        var cur = parseInt(getStyle(elem,attr)) + step;
        if(cur >= target && step > 0  ||  cur <= target && step < 0){ //下
            cur = target;
            //停止定时器
            clearInterval(elem.timer);
        }
        
        elem.style[attr] = cur + "px";

    },30);
}
5.轮播图

a.html布局

<div class="view" id="view">
        <ul id="lunbo">
            <li><img src="img/1.jpg" alt="#"></li>
            <li><img src="img/2.jpg" alt="#"></li>
            <li><img src="img/3.jpg" alt="#"></li>
            <li><img src="img/4.jpg" alt="#"></li>
            <li><img src="img/1.jpg" alt="#"></li>
        </ul>
        <div>
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

b.css样式

<style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .view{
            position:relative;
            width:500px;  
            height:380px;
            border:2px solid black;
            margin:50px auto;
            overflow: hidden;
        }
        .view ul{
            position:absolute;
            top:0;
            left:0;
            width:2500px;
        }
        .view ul::after{
            content:"";
            display:block;
            clear:both;
        }
        .view ul li{          
            float:left;
        }
        .view ul li img{
            width:500px;
            height:380px;
            }
        .view div{
            position:absolute;
            bottom:10px;
            width:100%;
            text-align: center;
        }
        .view div span{
            display:inline-block;
            width:16px;
            height:16px;
            background-color:white;
            border-radius:50%;
            margin-right:5px;
        }
        .view div .active{background-color:orangered;}
    </style>

c.自动循环播放轮播图

 <script src="js/ujiuye.js"></script>
    <script>
        var view=document.getElementById("view");
        var oUl=document.getElementById("lunbo");
        var oSpan=document.getElementsByTagName("span");
        var n=0;
        //轮播图播放函数
        var change =function () {
                n++;
                if(n==5){
                    n=1;
                    oUl.style.left=0+"px";
                }
                move(oUl, "left", 30, -500 * n);//调用之前封装好的运动函数
                for(var i=0;i<oSpan.length;i++){
                    oSpan[i].className="";
                }
                oSpan[n==4?0:n].className="active";

            }
        //定时器调用轮播图
        var timer = setInterval(change, 2000);

d.点击圆圈切换图片

//鼠标移入清除定时器
        view.onmouseover = function () {
            clearInterval(timer);
        }
        //鼠标移出恢复定时器
        view.onmouseout = function () {
            timer = setInterval(change, 2000);
        }
        var fun = function (n) {
            oUl.style.left = -500 * n + "px";
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n].className = "active";
        }
        //通过小圆圈控制图片
        for(var i=0;i<oSpan.length;i++){
           oSpan[i].index=i;
            oSpan[i].onclick = function(){
                fun(this.index);
            }         
        }

轮播图的应用：

功能：

1.自动切换图片

2.鼠标移入自动切换停止，鼠标移出自动切换恢复

3.点击左右按钮可以切换图片

4.点击小圆点可以切换图片

//html布局
 <div class="box" id="box">
        <ul id="lunbo">
            <li><img src="img/one.jpg" alt="#"></li>
            <li><img src="img/two.jpg" alt="#"></li>
            <li><img src="img/three.jpg" alt="#"></li>
            <li><img src="img/four.jpg" alt="#"></li>
            <li><img src="img/one.jpg" alt="#"></li>
        </ul>
        <div class="circle">
            <span class="active"></span><span></span><span></span><span></span>
        </div>
        <div id="leftButton"></div>
        <div id="rightButton"></div>
    </div>

//css样式
<style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .box{
            position:relative;
            width:960px;
            height:320px;
            border:1px solid red;
            margin:20px auto;
            overflow: hidden;
        }
        .box #lunbo::after{
            content:"";
            display:block;
            clear:both;
        }
        .box #lunbo{
            position:absolute;
            left:0;
            width:4800px;
            height:320px;
        }
        .box #lunbo li{float:left;}
        .box .circle{
            position:absolute;
            bottom:10px;
            width:100%;
            text-align: center;
        }
        .box .circle span{
            display:inline-block;
            width:14px;
            height:14px;
            border-radius:50%;
            background-color:white;
            margin-right:5px;
            }
        .box .circle .active{background-color:orange;}
        #leftButton,#rightButton{
            position:absolute;
            top:120px;
            width:60px;
            height:80px;
            background-image: url(img/btn_show.png);
            background-repeat: no-repeat;
        }
        #leftButton{
            left:0;
            background-position:0 -80px;
        }
        #rightButton{
            right:0;
            background-position:0 0;
        }
    </style>

   <script src="js/function.js"></script>  //引入一个js文件，里面有封装好的函数
   <script>
        var oBox = document.getElementById("box");
        var lunboUl = document.getElementById("lunbo");
        var oSpan = document.getElementsByTagName("span");
        var leftBtn = document.getElementById("leftButton");
        var rightBtn = document.getElementById("rightButton");
        var n = 0;
        //轮播图滑动
        var change = function () {
            n++;
            if (n == 5) {
                n = 1;
                lunboUl.style.left = 0;
            }
            move(lunboUl, "left", 50, -960 * n);
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n == 4 ? 0 : n].className = "active";

        }
        //定时器调用
        var timer = setInterval(change, 3000);
        //鼠标移入清除定时器
        oBox.onmouseover = function () {
            clearInterval(timer);
        }
        //鼠标移出恢复定时器
        oBox.onmouseout = function () {
            timer = setInterval(change, 3000);
        }
        //点击右按钮，图片下一张
        rightBtn.onclick = function () {
            n++;
            if (n == 4) { n = 0; }
            fun(n);
        }
        //点击左按钮，图片上一张
        leftBtn.onclick = function () {
            n--;
            if (n < 0) { n = 3; }
            fun(n);
        }
        //封装点击的函数
        var fun = function (n) {
            lunboUl.style.left = -960 * n + "px";
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n].className = "active";
        }
        //通过小圆圈控制图片
        for(var i=0;i<oSpan.length;i++){
           oSpan[i].index=i;
            oSpan[i].onclick = function(){
                fun(this.index);
            }         
        }


    </script>

在这里插入图片描述

//封装好的函数


/* 
* 获取元素样式
* @param {object}:elem 标签
* @param {string}:attr 属性名
 */
function getStyle(elem,attr){ 
    if(elem.currentStyle){
        var w = elem.currentStyle[attr]; 
    }else{
        var w = getComputedStyle(elem)[attr];
    }
    return w;
}


/* 
* 运动函数
* @param {object}:elem 标签
* @param {string}:attr 属性名
* @param {number}:step 步长（每次的运动距离）
* @param {number}:target 目标值
 */

function move(elem,attr,step,target){
    step =  parseInt(getStyle(elem,attr))< target ? step :-step;
    clearInterval(elem.timer);//自定义属性
    elem.timer = setInterval(function(){ 
        //获取当前值 + 10
        var cur = parseInt(getStyle(elem,attr)) + step;
        if(cur >= target && step > 0  ||  cur <= target && step < 0){ //下
            cur = target;
            //停止定时器
            clearInterval(elem.timer);
        }
        
        elem.style[attr] = cur + "px";

    },30);
}
LuckyGirl_L
关注
定时器（简单的进行封装）
m0_64337756的博客
12-10 1091
定时器 简单封装
JS中的定时器封装函数
darabiuz的博客
04-08 1136
定时器是js当中非常常用的一个windows对象的方法，把他封装后加入自己的js库里面会带来很多便捷 function move(obj, attr, target, speed, callback) { //关闭上一个定时器 clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，.
封装的定时器
11-23
封装的定时器
JavaScript---day07
Amanecer_的博客
08-30 322
函数返回值、获取非行间样式、函数封装与代码复用、定时器
定时器类的封装
N_irvana的博客
06-20 675
/** * 在Scene里添加 this.addChild(new TimeCount()) * 使用美术字的倒计时 需要 fnt文件预加载 * 美术字的名字注意修改 * 使用的时候通过 * cc.eventManager.dispatchCustomEvent(USER_TIME_COUNT_SET_TIME, 5) 设置倒计时时间 * cc.eventManager.disp
STC51输出PWM程序模板（定时器模拟、函数封装、直接套用、修改参数）.zip
02-25
总的来说，这个STC51 PWM程序模板通过定时器模拟输出，结合函数封装和参数修改，提供了一种简洁高效的解决方案。无论是新手还是经验丰富的工程师，都能从中受益，快速实现PWM输出功能，从而节省开发时间和精力。在...
JavaScript的定时器与运动函数封装
weixin_58139900的博客
11-04 912
定时器 定时器分类 延迟定时器：多长时间之后才执行一次 （只执行一次 ） 应用场景：广告弹出 间歇性定时器：没隔多长时间就执行一次（只要不清除就一直执行） 应用场景：轮播图，倒计时 延迟定时器：一般支持最小值4ms 间歇性定时器：一般支持最小毫秒值 10ms 定时器的设置 延迟定时器 基本语法：setTimeout(fun,time) fun:函数，可以传递实名函数或匿名函数 time：时间，单位是ms（单...
常用子函数封装集合_Ｃ５１_函数封装_
09-29
本文将详细阐述51单片机的常用子函数封装，包括延时、LED灯驱动、串口收发、外部中断、定时器控制以及IAP（In-Application Programming）和触摸按键等重要功能的实现方法。 首先，延时函数是51单片机编程中的基础。...
51单片机定时器的封装
01-25
51单片机定时器封装，封装了定时器的功能，用时可直接调用相关函数
js第九节-定时器的管理，函数封装
chenminglvming的博客
04-08 3114
js第九节-定时器的管理，函数封装 一、函数的封装 1.元素移动的函数封装 //封装函数-->让某某对象自动移动到某位置的封装函数 //obj-->传入的对象 attr-->传入的是属性值 dir-->步进值 target-->移动到指定位置的值 //endFn-->有没有回调函数。注意：前进时target一定是大于dir的，后退则一定是小于target的 function turn
定时器的封装
czpboy的博客
09-15 951
定时器的封装可以通知窗体，可以不通知窗体。 1 定义 typedef void (CALLBACK *TimerProc)(HWND hwnd,UINT uMsg,    UINT_PTR idEvent,DWORD dwTime); class CMyTimer { public:     CMyTimer();     ~CMyTimer(); public:     bool sta...
定时器应用（函数封装）
09-26 325
定时器：setInterval(函数，时间) 两个参数 setInterval() 重复执行 clearInterval() 清除定时 setTimeout() 只执行一次 clearTimeout() 清除定时 回调函数endFn() getStyle(obj, attr) 两个参数：1.获取谁(对象) 2.获取谁的什么样的样式名称 > < 不能传...
封装定时器方法
最新发布
weixin_61001537的博客
06-19 390
【代码】封装定时器方法。
vue计时器组件的封装，实现暂停、开始、重置等一系类功能
LYQ
04-02 8956
由于业务上的更改，前端需要一款倒计时组件，这个业务需要倒计时组件的时间能暂停、开始、重置等一系列的功能，本来有那么多优秀的UI组件可以实现这个功能，但是老项目不支持引入其他UI组件，所以只能自己写了，实现的效果如下： 调用代码如下： <template> <div style="text-align: center;"> <countdown ref="vCountDown" :time="times" format="mm:ss" autoStart @cha
js--定时器的学习和对动画的封装（定时器）
09-17 230
1.定时器：在js里面，定时器主要有两种，setInterval(function, time) 和 setTimeout（function,time)， setInterval：每个time秒执行一次函数function setTimeout：time秒后执行函数，仅且只执行一次 对于定时器的定义主要有三种 setInterval(function(){//第一种 ...
timerfd加epoll封装定时器
冯同学的博客
05-12 1219
timerfd加epoll封装定时器
QT 自学内容 day05 自定义的控件封装，定时器的两种使用方法，event 事件分发器，事件过滤器！
she666666的博客
09-18 423
自定义的控件封装，定时器的两种使用方法，event 事件分发器，事件过滤器！
封装的定时器类
chinayu2007的专栏
09-23 413
#ifndef __TTIMECONTROL__ #define __TTIMECONTROL__ #include //16个字节汇编指令 #pragma pack(push) //保存对齐状态 #pragma pack(1) struct TInstruction { byte Code1[7]; void *Self; byte Code2; v
深入Qt--封装Qt通用函数
Venus的博客
08-05 1976
深入Qt–封装Qt通用函数 博主编写Qt应用程序这么多年，从终端调试软件、界面应用软件、音视频编解码软件、截屏录屏软件、推流拉流软件、OSG相关软件、输入法，积累一些方便使用的函数，现在只将部分公开出来。 头文件：quiutils.h #ifndef QUIUTILS_H #define QUIUTILS_H #include <QObject> #include <QApplication> namespace QUIUtils { /** * @brief d
C#实现多媒体定时器调用与封装库使用指南
通常，封装库会提供一个接口，使得C#能够如同调用本地.NET类一样调用多媒体定时器的函数。 2. **准备环境**：在C#项目中引入C++/CLI封装库。这通常意味着需要添加对应的.dll引用到你的项目中，并确保C++/CLI库与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值