倒计时

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_30501857

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量56

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zkn11199/p/5587537.html

版权

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>

转载于:https://www.cnblogs.com/zkn11199/p/5587537.html

weixin_30501857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时

1.概述在浏览一些网站时，网站中经常会根据某一天发生的重要事件给出倒计时天数，比如“距北京奥运会开幕还有30天！“、”距上海世博会开幕还有10天！“等等。2.技术要点主要是利用JavaScript中的Date对象来实现。主要就是计算当前系统日期与某一日期之间的天数差，然后根据天数差显示相应的提示信息。计算出的天数差可能为一个浮点值，需要通过Math对象的floor()...
复制链接

扫一扫