JS特效---定时器的操作

最新推荐文章于 2024-05-31 08:30:00 发布

junlingshiwo

最新推荐文章于 2024-05-31 08:30:00 发布

阅读量157

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_45722135/article/details/108239733

版权

了解定时器：

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

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

最低0.47元/天解锁文章

junlingshiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS特效---定时器的操作

了解定时器：1需求：js的程序的执行速度非常快，如果希望一段程序，可以每个一段时间执行一次，就可以使用定时器来调用。2 使用：循环执行：如上图中代码就是循环执行，后面的2000是秒数，随意更换。案例：《1定时器鲜花表白：设置倒计时与鲜花如下。然后就要设置定时器，然后再清除定时器（claerInterval）。<!DOCTYPE html><html lang="en"><head> <meta cha
复制链接

扫一扫