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年倒计时的主要内容,如果未能解决你的问题,请参考以下文章