zoukankan      html  css  js  c++  java
  • 倒计时

    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>
  • 相关阅读:
    short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
    SpringMVC常用的注解有哪些?
    Spring支持的ORM?
    什么是代理?
    一对一、一对多的关联查询 ?
    iHTML 的 form 提交之前如何验证数值文本框的内容全部为数字?
    解释JDBC抽象和DAO模块?
    Bean 工厂和 Application contexts 有什么区别?
    GitHub的注册
    HTML的学习
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587537.html
Copyright © 2011-2022 走看看