• 倒计时


    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>
  • 相关阅读:
    java并发容器
    实现个简单的线程池
    【hdu 3501 (数论、欧拉函数)】
    【关于Java学习的几点看法】
    【乘法游戏】
    【hdu 1280 前m大的数】
    【最大因子数】
    【ECJTU_ACM 11级队员2012年暑假训练赛(7) C Fire Net】
    【ACM ICPC Fighting!!!!!!!!!!!!!】
    【firefly 默默最喜欢的歌】
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587537.html
Copyright © 2020-2023  润新知