JS特效---定时器的操作_定时器加特效-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45722135/article/details/108239733

本文介绍了JavaScript定时器在各种特效中的应用，包括定时器实现的鲜花表白倒计时、Date对象自定义时间、放假倒计时、防止定时器累加、长图滚动效果、随机点名、匀速动画和缓动动画。重点讲解了如何通过设置和清除定时器来控制代码的周期性执行，并展示了不同场景下定时器的巧妙运用。

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

了解定时器：

1需求：js的程序的执行速度非常快，如果希望一段程序，可以每个一段时间执行一次，就可以使用定时器来调用。

2 使用：

循环执行：

如上图中代码就是循环执行，后面的2000是秒数，随意更换。

案例：

《1定时器鲜花表白：

设置倒计时与鲜花如下。

然后就要设置定时器，

然后再清除定时器（claerInterval）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
            text-align: center;
            padding: 100px;
        }
        #pic{
            display: none;

        }
        #time{
            font-size: 200px;
            color: orangered;
        }
        \o0
    </style>
</head>
<body>
<div id="time">5</div>
<img  id="pic" src="images/flower.gif" alt="">

</body>

<script>
    window.onload=function (ev) {
        var intervalID=setInterval(function () {
            $('time').innerText-=1;

            // 清除定时器
            if ($('time').innerText==='0'){
                clearInterval(intervalID);
                //显示和隐藏
                $('pic').style.display='block';
                $('time').style.display='none';

            }
        },1000);
    }
    function $(id) {
        return typeof id==='string'? document.getElementById(id):null;
    }
</script>
</html>i

《2Date：

Date对象基于1970年1月1日（世界标准时间）起的毫秒数。

getTime() //返回毫秒秒数和valueof()结果一样
getMilliseconds()
getSeconds()//返回0-59
getMinutes()//返回0-59
getHours()//0-23
getDAY()//返回星期几 0周日 6周六
getDate()//返回当前月的第几天
getNonth()//返回月份，从0开始
getFullYear()//返回4位的年份 如2020

对此我们来设置自定义时间如下：

《3 放假倒计时：

进行倒计时，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #time{
            font-size: 40px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="time"></div>
<script>
    window.onload = function () {
        // 1.获取需要的标签
        var time = document.getElementById('time');

        // 2. 自定义将来的时间
        var nextDate = new Date('2018/03/01 08:17:35');

        // 3. 开启定时器
        setInterval(function () {
            // 4. 获取现在的时间
            var currentDate = new Date();

            // 5. 获取时间戳
            var currentTime = currentDate.getTime();
            var nextTime = nextDate.getTime();

            // 6. 剩下的时间戳
            var allTime = nextTime - currentTime;

            // 7. 把毫秒转成秒
            var allSecond = parseInt(allTime / 1000);

            // 8.转化 天时分秒
            var d = size(parseInt(allSecond / 3600 / 24));
            var h = size(parseInt(allSecond / 3600 % 24));
            var m = size(parseInt(allSecond / 60 % 60));
            var s = size(parseInt(allSecond  % 60));

            // 9. 注入
            time.innerText = "距离放假还有"+ d +"天"+ h +"小时" + m +"分钟"+ s +"秒";
        }, 1000);

        function size(num) {
            return num >= 10 ? num : '0' + num;
        }
    }
</script>
</body>
</html>

《4 防止定时器累加

细节：当一个事件触发定时器时，要在开始的时侯先清除定时器，再设置定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    window.onload=function (ev) {
        //1获取BOX
        var box=document.getElementById('box');
        var height=0,intervalID;

        //2监听鼠标进入(先清除后设置)
        box.addEventListener('mouseover',function (ev1) {
            //清除定时器
            clearInterval(intervalID);
            //设置一个定时器
            intervalID=setInterval(function () {
                height += 1;
                console.log(height);
            },1000)
        });
    }
</script>

</body>
</html>

《5 长图滚动效果

效果分为上下效果，当鼠标进入上半部分时，长图向下走，当进入下半部分则相反。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: #000000;
        }
        #box{
            width:750px ;
            height: 400px;
            border: 10px solid red;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        #pic{
            position: absolute;
            left: 0;
            top: 0;
        }
        #to_top,#to_bottom{
            width: 100%;
            height: 50%;
            background-color: transparent;
            position: absolute;
            left: 0;
            cursor: pointer;
        }
        #to_top{
            top: 0;
        }
        #to_bottom{
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="box">
    <img id="pic" src="images/timg.jpg" alt="">
    <span id="to_top"></span>
    <span id="to_bottom"></span>
</div>
<script>
    window.onload=function (ev) {
        //1获取需要标签
        var box=document.getElementById('box');
        var pic=document.getElementById('pic');
        var to_top=document.getElementById('to_top');
        var to_bottom=document.getElementById('to_bottom');
        var intervalID,num=0;
        //2监听鼠标进入事件
        //向上
        to_top.onmouseover=function (ev1) {
            //2.1清除定时器
            clearInterval(intervalID);
            //2.2设置定时器
            intervalID=setInterval(function () {
                //步长
                num-=10;
                //判断
                if (num>-2466){
                    pic.style.top=num+'px';
                }else {
                    clearInterval(intervalID);
                }
            },20);
        };
        //向下
        to_bottom.onmouseover=function (ev1) {
        //鼠标离开
        box.onmouseout=function (ev1) {
            //清除定时器
            clearInterval(intervalID);
            //2.2设置定时器
            intervalID=setInterval(function () {
                //步长
                num+=10;
                //判断
                if (num<=0){
                    pic.style.top=num+'px';
                }else {
                    clearInterval(intervalID);
                }
            },20);
        }
    }
    };
</script>

</body>
</html>

《6 随机点名册

开始到结束随机点名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        #name{
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<button id="begin">开始点名</button>
<button id="end">结束点名</button>
<div id="name"></div>
<script>
    window.onload=function (ev) {
        //1获取需要的标签
        var begin=document.getElementById('begin');
        var end=document.getElementById('end');
        var name=document.getElementById('name');

        //2 定义变量
        var intervalID=null;
        var nameArr=['权志龙','张继科','贾斯汀','刘雯','王子异','新八唧'];
        name.innerText=nameArr[0];

        //3监听点击
        begin.onclick=function (ev1) {
            // 先清除
            clearInterval(intervalID);
            intervalID=setInterval(function () {
                //3.1产生随机数
                var s_index=parseInt(Math.random()*nameArr.length);
                name.innerText=nameArr[s_index];
            },20)
        }
        //结束点名，清除定时器。
        end.onclick=function (ev1) {
            clearInterval(intervalID);
        }

    }
</script>

</body>
</html>

《7 定时器匀速动画

上图就是动画开始到结束的最大运动值。

用js制作中判断是否结束运动，到最后结束值，我们进行判断，如上图中红色区域，当开始值等于最后值，就可以清除定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 80px;
            height: 80px;
            background-color: #0c80dc;
        }
    </style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script>
    window.addEventListener('load', function (ev) {
        //1获取需要标签
        var btn=document.getElementById('btn');
        var box=document.getElementById('box');

        //定义变量
        var intervalID=null, begin=0, step=50, target=599;

        //2 事件触发
        btn.addEventListener('click',function (ev1) {
            //2.1清除定时器
            clearInterval(intervalID);

            //2.2 设置定时器
            intervalID=setInterval(function () {
                //改变起始值
                begin+=step;

                //判断
                if(begin>=target){
                    begin=target;
                    clearInterval(intervalID)
                }
                console.log(begin);


                //动起来
                box.style.marginLeft=begin + 'px';


            },10);
        });
    });
</script>

</body>
</html>

《8 缓动动画：

就是缓慢运动到结束。

红色部分就是缓动公式，才使此运动达到缓动效果。

缓动公式： 起始值 +=（结束值 - 起始值）*缓动系数（0~1）0.2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 80px;
            height: 80px;
            background-color: #0c80dc;
        }
    </style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<!--<script src="MYTOOL/MYTool.01-基础篇"></script>-->
<script>
    window.addEventListener('load',function (ev) {
        //1定义变量
        var intervalID=null,begin=0,target=800;

        //2 开始动画
        //缓动公式： 起始值 +=（结束值 - 起始值）*缓动系数（0~1）0.2
        $('btn').onclick=function (ev1) {
            //2.1 清除定时器
            clearInterval(intervalID);
            //2.2设置定时器
            intervalID=setInterval(function () {
                begin += (target - begin)*0.2;
                console.log(begin);
                //判断
                if (Math.round(begin) >=target){
                    begin=target;
                    clearInterval(intervalID);
                }
                //动起来
                $('box').style.marginLeft=begin+'px';

            },1000);
        }


    })
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
</script>

</body>
</html>