倒计时

Posted 柯南&

tags:

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

1.概述

在浏览一些网站时,网站中经常会根据某一天发生的重要事件给出倒计时天数,比如“距北京奥运会开幕还有30天!“、”距上海世博会开幕还有10天!“等等。

 

2.技术要点 

     主要是利用javascript中的Date对象来实现。主要就是计算当前系统日期与某一日期之间的天数差,然后根据天数差显示相应的提示信息。计算出的天数差可能为一个浮点值,需要通过Math对象的floor()方法获取整数值,如果天数差为负数,还需要使用Math对象取绝对值的方法abs()。

 

3.实现过程

(1)新建index.jsp页,编写用于倒计时天数的JavaScript函数。关键代码如下:

/**
      *事件倒计时
      *@title:事件的名称  
      *@eventDate:事件的日期
*/
function countDown(title,eventDate){
            var dateObj = new Date();                    //当前系统时间的Date对象 
            var dateStr = eventDate.split("-");
            var eventDateObj = new Date(dateStr[0],(dateStr[1]-1),dateStr[2]); 
            var t1 = dateObj.getTime();            //获得Date 对象中的距1970年的时间的毫秒数
            var t2 = eventDateObj.getTime();                 //获得Date 对象中的距1970年的时间的毫秒数
            var datetime=24*60*60*1000;               //一天的毫秒值 
            var days = Math.floor((t2-t1)/datetime)+1;    //相差的天数        
            if(days>0){
                  document.getElementById("day_str").innerhtml="距"+title+"开幕还有"+days+"天!";
            }
            if(days==0){
                  document.getElementById("day_str").innerHTML="今天是"+title+"开幕日!";
            }
            if(days<0){
                  days =Math.abs(days)+1;
                  document.getElementById("day_str").innerHTML="今天是"+title+"第"+days+"个比赛日!";
            }    
            //每隔一天的时间调用一次本函数,刷新显示的倒计时提示信息
            setTimeout("countDown(‘2010南非世界杯‘,‘2010-6-11‘)",datetime); 
}

(2) 通过<body>标签的onload事件加载步骤(1)的JavaScript函数,并且在页面的相应位置加入<div>标签,用于显示倒计时的提示信息,关键代码如下:

<body onLoad="javascript:countDown(‘2010南非世界杯‘,‘2010-6-11‘)">
            <div id="day_str" class="word_Green"></div>
</body>

 

以上是关于倒计时的主要内容,如果未能解决你的问题,请参考以下文章

如何在使用片段和计时器的选项卡式活动上更新 UI

如何实现React原生倒计时圈

自动刷新android片段,直到满足条件

如果用户没有使用浏览器,则jQuery计时器停止

颤振计时器仅更新秒小部件

#yyds干货盘点#愚公系列2023年02月 .NET/C#知识点-程序运行计时的总结