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>
  • 相关阅读:
    [loj6039]「雅礼集训 2017 Day5」珠宝 dp+决策单调性+分治
    [loj6038]「雅礼集训 2017 Day5」远行 lct+并查集
    [BZOJ4945][Noi2017]游戏 2-sat
    [BZOJ4942][Noi2017]整数 线段树+压位
    [BZOJ3672][Noi2014]购票 斜率优化+点分治+cdq分治
    12.17模拟赛
    [BZOJ3150][Ctsc2013]猴子 期望dp+高斯消元
    杜教筛
    Swagger展示枚举类型参数
    spring boot 如何映射json格式请求中的枚举值
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587537.html
Copyright © 2011-2022 走看看