html,CSS,JS写一个2021年倒计时

Posted TiSou1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html,CSS,JS写一个2021年倒计时相关的知识,希望对你有一定的参考价值。

倒计时效果如图:

布局主要用了5个div,主要的js代码如下:

<script type="text/javascript">
        var s1="2021-1-1,0:0:0";
        window.onload=function(){
            date();
            function zero(i){
                return i<10?"0"+i:i+"";
            }
            function date(){
                var d=document.getElementById("day");
                var h=document.getElementById("hour");
                var m=document.getElementById("minute");
                var s=document.getElementById("second");
                var nowtime=new Date();
                //var endtime=new Date("2020/1/5,00:00:00");//2020-1-1,0:0:0
                var endtime=new Date(s1);
                var time=parseInt((endtime.getTime()-nowtime.getTime())/1000);
                var day=parseInt(time/(24*60*60));
                var hour=parseInt(time/(60*60)%24);
                var minute=parseInt(time/60%60);
                var second=parseInt(time%60);
                day=zero(day);
                hour=zero(hour);
                minute=zero(minute);
                second=zero(second);//+零    
                d.innerhtml=day;
                h.innerHTML=hour;
                m.innerHTML=minute;
                s.innerHTML=second;
                setTimeout(date,1000);
            }
    }
    </script>

后期可以添加实现输入一个时间。来看看距离输入的时间还有多久。

以上是关于html,CSS,JS写一个2021年倒计时的主要内容,如果未能解决你的问题,请参考以下文章

100行Html5+CSS3+JS代码实现元旦倒计时界面

JS 5秒倒计时的代码怎么写?时间要实时显示在屏幕上的。

前端面试每日 3+1 —— 第791天

简单实现2020年倒计时

m.jd.com首页中的js效果

HTML2023跨年烟花代码