JS倒计时效果+数字图片

最新推荐文章于 2020-07-27 08:55:47 发布

MrLiber

最新推荐文章于 2020-07-27 08:55:47 发布

阅读量4.8k

点赞数

分类专栏： js 文章标签： js 倒计时-数字图片

本文链接：https://blog.youkuaiyun.com/MrLiber/article/details/75136905

版权

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用JavaScript结合数字图片创建倒计时效果的方法。关键在于确保图片命名与数字对应。代码已给出，欢迎各位同行指正。

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

这里用JS结合一组数字图片，写了一个简单的倒计时效果。数字图片大家自己找啦，这里需要注意的就是图片命名——要和图片中的数字保持一致哟。
如果有什么不完善的地方，还请各路大神指点。
代码呈上：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS图片倒计时效果</title>
        <style>
            h3 {
                font-size: 120px;
                color: #D42D00;
            }
            .result {
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <h3>距离2017国庆节剩余：</h3>
        <div class="result">
            <img src="./imgs/0.png"/>
            <img src="./imgs/0.png"/>天
            <img src="./imgs/0.png"/>
            <img src="./imgs/0.png"/>小时
            <img src="./imgs/0.png"/>
            <img src="./imgs/0.png"/>分
            <img src="./imgs/0.png"/>
            <img src="./imgs/0.png"/>秒
        </div>
        <script>
            var timer=null;
            var odiv=document.querySelectorAll(".result");

            function leftAddZero(n){
                if(n<10){
                    return "0"+n
                }else {
                    return ""+n
                }
            }

            function countDown(dateObj,dom){
                var year=dateObj.year || 2017;
                var month=dateObj.month-1 || 1;
                var day=dateObj.day || 1;
                var hour=dateObj.hour || 0;
                var minute=dateObj.minute || 0;
                var second=dateObj.second || 0;
                var oimgs=document.getElementsByTagName("img");

                //获取标签的方法
                timer=setInterval(function() {
                    var currentDate=new Date(); //创建一个当前日期对象

                    //创建目标时间
                    var targetDate=new Date(year,month,day,hour,minute,second);

                    //计算目标时间与当前时间的秒数
                    var dis=Math.floor((targetDate.getTime()-currentDate.getTime())/1000);

                    //天数
                    var tian=Math.floor(dis/(24*60*60));
                    dis=dis%(24*60*60); //除了天数外剩余秒数

                    //小时数
                    var xiaoshi=Math.floor(dis/3600);
                    dis=dis%3600;  //除了小时数外剩余的秒数

                    //分钟数
                    var fen=Math.floor(dis/60);

                    dis=dis%60; //除了天数，小时数，分钟数后剩余的秒数

                    //秒数
                    var miao=dis;
                    var strTime=leftAddZero(tian)+leftAddZero(xiaoshi)+leftAddZero(fen)+leftAddZero(miao);

                    for(var i=0,len=oimgs.length;i<len;i++){
                        oimgs[i].src="./imgs/"+strTime[i]+".png";
                    }
                },1000)
            }//end

            countDown({
                year:2017,
                month:10,
                day:1,
                hour:00
            },odiv);
        </script>
    </body>
</html>