demo3用setInterval()方法做一个节日倒计时

javascript 专栏收录该内容
3 篇文章 0 订阅

    周末研究了一下setInterval()方法,打算做一个倒计时器,今天早上感觉到位了,将定时器做出来了…

做这个倒计时一共需要解决三个问题:
1、倒计时距离2019-10-1国庆小长假还有多少天 多少小时 多少分 多少秒?
  (tip:两个日期可以相减结果是毫秒)
2、时间倒计时如何实现?
3、如何将时间换成图片样式?(这一步可做可不做,如果想让页面变得好看一点就可以做,图片可以在网上找)

下面开始解决第一个问题:
    倒计时距离2019-10-1国庆小长假还有多少天 多少小时 多少分 多少秒?
    其中:var date2 = new Date(“2019-10-1”);
    这里日期写10-1和10-01,是有很大区别的,大家可以去浏览器跑程序试一下,设置时间写2019-10-1,获取的时间为2019-10-1 00:00:00 ;若写2019-10-01,获取的时间为2019-10-01 08:00:00;按照习惯,建议大家写2019-10-1;

var date1 = new Date();
var date2 = new Date("2019-10-1");
var count = parseInt((date2 - date1)/1000);//两个时间可以相减,减出来的时间为毫秒,将毫秒转化为秒
var newday = parseInt(count / 60 / 60 / 24); //计算天数
var newhour = parseInt(count / 60 / 60 % 24);
var newmin = parseInt(count / 60 / 60 % 24);
var newsec = parseInt(count % 60);

接下来第二点:
    时间倒计时如何实现?
    这一步我想了一晚上想破脑袋都没写出来,等今早我写出来的时候才意识到昨晚的自己有多么愚蠢,居然只用了一句代码就搞定了…

setInterval(function(){//设置定时器
        count--;//时间(秒)做倒计时;(这是亮点部分)..
},1000);

最后解决第三个问题:
    如何将时间换成图片样式?
    只需要做一个循环,循环内容是获取的时间,但是要记得将number类型转换成String类型才能获取循环次数(时间长度),然后将图面的名称设为一个变量,这个变量要与图片内容以及图片命名一致,就完成了…

function numberToImg(num){//将时间数字转化为文字
        var num = String(num);//将获取的天数或者小时等等转化为字符串,才可以做下标的循环..
        var html = "";
        for(var i = 0;i < num.length; i++){//假设获取的天数为32天
            var item = num.charAt(i);//获取的item数字要与图片内容以及图片命名一致;
            html +="<img src ='../img/" + item + ".jpg'>";
        }
        return html;
    }

全部代码展示:

<script>
    var resultDiv = document.getElementById("result");
    var date1 = new Date();
    var date2 = new Date("2019-10-1");//设置时间写2019-10-1,获取的时间为2019-10-1 00:00:00 ;若写2019-10-01,获取的时间为2019-10-1 08:00:00;
    var count = parseInt((date2 - date1)/1000);
    function showTime(){
        var newday = parseInt(count / 60 / 60 / 24); //计算天数
        newday = newday < 10 ? "0" + newday : newday;//天数位数小于两位,前面加0
        var day = numberToImg(newday);//调用函数,将天数转换为图片,以下同理
        
        var newhour = parseInt(count / 60 / 60 % 24);
        newhour = newhour < 10 ? "0" + newhour : newhour;
        var hour = numberToImg(newhour);
        
        var newmin = parseInt(count / 60 / 60 % 24);
        newmin = newmin < 10 ? "0" + newmin : newmin;
        var min = numberToImg(newmin);
       
        var newsec = parseInt(count % 60);
        newsec = newsec < 10 ? "0" + newsec : newsec;
        var sec = numberToImg(newsec);
        
        resultDiv.innerHTML = "距离十一小长假还有:"+ day + "天" + hour + "时" + min + "分" + sec + "秒";
    }
     function numberToImg(num){//将时间数字转化为文字
        var num = String(num);//将获取的天数或者小时等等转化为字符串,才可以做下标的循环..
        var html = "";
        for(var i = 0;i < num.length; i++){//假设获取的天数为32天
            var item = num.charAt(i);//获取的item数字要与图片内容以及图片命名一致;
            html +="<img src ='../img/" + item + ".jpg'>";
        }
        return html;
    }
    showTime();//页面一加载出来就要出时间,否则倒计时会有一秒延迟..
    var timer = setInterval(function(){//设置定时器
        count--;//时间(秒)做倒计时;(这是亮点部分)..
        if(count == -1){//当时间倒数到0的时候,停止倒计时
            clearInterval(timer);
        }
        showTime();
    },1000);
</script>

效果图:
在这里插入图片描述

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值