使用JavaScript设计一个简单的HTML倒计时页面

最新推荐文章于 2024-08-22 10:47:09 发布

lzssing

最新推荐文章于 2024-08-22 10:47:09 发布

阅读量5.2k

点赞数 1

分类专栏： HTML 文章标签：倒计时 js JavaScript html

本文链接：https://blog.csdn.net/qq_21429153/article/details/53118151

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在HTML页面中显示倒计时效果，使用js来控制倒计时效果，以下为关键代码：

<div style="text-align:center;margin-top:100px;">
   <span>距离2020年还有：</span>
   <span id="t_d"></span>
   <span id="t_h">00时</span>
   <span id="t_m">00分</span>
   <span id="t_s">00秒</span>
</div>
<script type="text/javascript">
   function getRTime(){
       var EndTime= new Date('2020/1/1 00:00:00'); //截止时间
       var NowTime = new Date();
       var t =EndTime.getTime() - NowTime.getTime();

       var d=Math.floor(t/1000/60/60/24);
       var h=Math.floor(t/1000/60/60%24);
       var m=Math.floor(t/1000/60%60);
       var s=Math.floor(t/1000%60);

       document.getElementById("t_d").innerHTML = d + "天";
       document.getElementById("t_h").innerHTML = h + "时";
       document.getElementById("t_m").innerHTML = m + "分";
       document.getElementById("t_s").innerHTML = s + "秒";
   }
   setInterval(getRTime,1000);
</script>