使用js倒计时还有几天及计时过了几天

公司主营业务是体育赛事为主的；尤其是足球赛事。现正值2016法国欧洲杯；之前忙于做欧洲杯专题没时间总结。现分享一个工作中需求带来的经历。

需求是：从现在开始倒计时欧洲杯还有多久开赛；当开赛之后开始计算已经开赛了几天及计算当前是小组赛还是1/8决赛,1/4决赛,半决赛,决赛。

废话不多说，直接上代码:

  4 var cdInterval, dateInterval;    //此方法为倒计时欧洲杯开赛时间，原理是用开赛时间的毫秒数减去当前毫秒数然后根据每天，小时，分，秒的毫秒数向下取整
  5 function countDown(){
  6     var agent = navigator.userAgent, startTime;
  7     if(agent.indexOf(‘Trident‘) > -1 || agent.indexOf(‘Edge‘) > -1) { // ie,因为IE不支持new Date(‘xxx‘)创建Date对象的时候传入的时间参数，所以这里使用　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//setUTCFullYear和setUTCHours，再getTime()等到当前毫秒数
  8         var euroDate = new Date();
  9         euroDate.setUTCFullYear(‘2016‘,‘05‘,‘10‘);//月份是从0-11的
 10         euroDate.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 11         startTime = euroDate;
 12     } else {
 13         startTime = new Date("2016 06 10 12:00:00");
 14     }
 15     var nowTime = new Date(), distanceTime
 16         ,startServer = startTime.getTime(), nowServer = nowTime.getTime();
 17     distanceTime = startServer - nowServer;
 18
 19     // 一天的豪秒数86400000  一个小时的毫秒数3600000  一分钟的毫秒数 60000   一秒钟的毫秒数 1000
 20     var d_date, d_hour, d_min,d_second;
 21     if(distanceTime > 0) {
 22         d_date = Math.floor(distanceTime/86400000); //计算还有几天
 23         distanceTime -= d_date*86400000;  //减去天数毫秒数计算下面的 小时数，分钟数，秒数
 24         d_hour = Math.floor(distanceTime/3600000);//计算小时
 25         distanceTime -= d_hour*3600000;//减去当前小时的毫秒数
 26         d_min = Math.floor(distanceTime/60000);//计算分
 27         distanceTime -= d_min*60000;//减去当前分的毫秒数
 28         d_second = Math.floor(distanceTime/1000);//计算秒
 29         distanceTime -= d_second*1000;//减去当前秒的毫秒数
 30         if(d_date < 10) {
 31             d_date = ‘0‘ + d_date;
 32         }
 33         if(d_hour < 10) {
 34             d_hour = ‘0‘ + d_hour;
 35         }
 36         if(d_min < 10) {
 37             d_min = ‘0‘ + d_min;
 38         }
 39         if(d_second < 10) {
 40             d_second = ‘0‘ + d_second;
 41         }
 42         document.getElementsByClassName(‘icon-time‘)[0].innerHTML = d_date; 43         document.getElementsByClassName(‘icon-time‘)[1].innerHTML = d_hour; 44         document.getELementsByClassName(‘icon-time‘)[2].innerHTML = d_min; 45         document.getElementsByClassName(‘icon-time‘)[3].innerHTML = d_second; 46     } else {
 47         clearInterval(cdInterval);
 48         clearInterval(dateInterval);
 50         $(‘.icon-time:not(:first)‘).remove();
 51
 52         $(‘div.time span‘).each(function(index, item) {
 53             if(index !== 0 && index !== 1) {
 54                 $(this).remove();
 55             }
 56         });
 57         backwardDays()
 58         dateInterval = setInterval(backwardDays, 10000);
 59     }
 60 }
 61 //天数，原理为用当前毫秒数减去开赛时候的毫秒数计算出已经开赛了几天
 62 function backwardDays(){
 63     var dataAgent = navigator.userAgent;
 64     var groupGameStart = 0,groupGameEnd = 0,eighthGameStart = 0,eighthGameEnd = 0,fourGameStart = 0,fourGameEnd = 0,halfGameStart = 0,　　　　　　　　　　　　halfGameEnd = 0,
 65     finalGame = 0,endGame = 0;
 66     var dist_day = ‘‘, day = ‘‘,now_day = ‘‘;　　　　　　//计算赛事时间
 67     if(dataAgent.indexOf(‘Trident‘) > -1 || dataAgent.indexOf(‘Edge‘) > -1) { //同上ie不支持new Date(‘xx‘)带参数
 68         var groupDayStart = new Date();
 69         var groupDayEnd = groupDayStart,
 70         eighthDayStart = groupDayStart, eighthDayEnd = groupDayStart,
 71         fourDayStart = groupDayStart,fourDayEnd = groupDayStart,
 72         halfDayStart = groupDayStart,halfDayEnd = groupDayStart,
 73         finalDayStart = groupDayStart,finalDayEnd = groupDayStart;
 74         //小组赛
 75         groupDayStart.setUTCFullYear(‘2016‘,‘05‘,‘10‘); groupDayStart.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 76         groupGameStart = groupDayStart.getTime();
 77         groupDayEnd.setUTCFullYear(‘2016‘,‘05‘,‘24‘);groupDayEnd.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 78         groupGameEnd = groupDayEnd.getTime();
 79         //1/8决赛
 80         eighthDayStart.setUTCFullYear(‘2016‘,‘05‘,‘25‘); eighthDayStart.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 81         eighthGameStart = eighthDayStart.getTime();
 82         eighthDayEnd.setUTCFullYear(‘2016‘,‘05‘,‘28‘);eighthDayEnd.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 83         eighthGameEnd = eighthDayEnd.getTime();
 84         //1/4决赛
 85         fourDayStart.setUTCFullYear(‘2016‘,‘06‘,‘01‘); fourDayStart.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 86         fourGameStart = fourDayStart.getTime();
 87         fourDayEnd.setUTCFullYear(‘2016‘,‘06‘,‘04‘);fourDayEnd.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 88         fourGameEnd = fourDayEnd.getTime();
 89         //半决赛
 90         halfDayStart.setUTCFullYear(‘2016‘,‘06‘,‘07‘); halfDayStart.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 91         halfGameStart = halfDayStart.getTime();
 92         halfDayEnd.setUTCFullYear(‘2016‘,‘06‘,‘08‘);halfDayEnd.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 93         halfGameEnd = halfDayEnd.getTime();
 94         //决赛
 95         finalDayStart.setUTCFullYear(‘2016‘,‘06‘,‘11‘); finalDayStart.setUTCHours(‘4‘,‘0‘,‘0‘,‘0‘);
 96         finalGame = finalDayStart.getTime();
 97         finalDayEnd.setUTCFullYear(‘2016‘,‘06‘,‘11‘);finalDayEnd.setUTCHours(‘15‘,‘59‘,‘0‘,‘0‘);
 98         endGame = finalDayEnd.getTime();
 99
100     } else {
101         groupGameStart = new Date("2016 06 10 12:00").getTime();
102         groupGameEnd = new Date("2016 06 24 12:00").getTime(),//小组赛结束
103             eighthGameStart = new Date("2016 06 25 12:00").getTime(), // 1/8决赛开始
104             eighthGameEnd = new Date("2016 06 28 12:00").getTime(), // 1/8决赛结束
105             fourGameStart = new Date("2016 07 01 12:00").getTime(), // 1/4决赛开始
106             fourGameEnd = new Date("2016 07 04 12:00").getTime(), // 1/4决赛结束
107             halfGameStart = new Date("2016 07 07 12:00").getTime(), //半决赛开始
108             halfGameEnd = new Date("2016 07 08 12:00").getTime(), //半决赛结束
109             finalGame = new Date("2016 07 11 12:00").getTime(), // 决赛
110             endGame = new Date("2016 07 11 23:59").getTime(); // 欧洲杯结束
111     }
112
113
114     var currentTime = new Date().getTime();//当前时间
115     //第几天
116     now_day = (currentTime - groupGameStart)/86400000;
117     dist_day = Math.floor((currentTime - groupGameStart)/86400000);
118     if(now_day > dist_day) {//如果计算出的当前天数大于向下取整的天数，则要加1
119         day = dist_day + 1;
120     } else {
121         day = dist_day
122     }
123
124     if(day === 0) {//day等于0的时候表示已经开赛，所以计算为第一天
125         day = 1;
126     }
127     if(day < 10) {
128         day = ‘0‘ + day;
129     }
130     $(‘.icon-time:eq(0)‘).text(day);        //根据时间范围算出赛事范围
131     if(currentTime >= groupGameStart && currentTime <= groupGameEnd) {//小组赛
132         $("em.gameType").text($(‘#xzs‘).val());
133     } else if(currentTime >= eighthGameStart && currentTime <= eighthGameEnd) {// 1/8 决赛
134         $("em.gameType").text("1/8"+$(‘#jsi‘).val());
135     } else if(currentTime >= fourGameStart && currentTime <= fourGameEnd) {// 1/4决赛
136         $("em.gameType").text("1/4"+$(‘#jsi‘).val());
137     } else if(currentTime >= halfGameStart && currentTime <= halfGameEnd) {// 半决赛
138         $("em.gameType").text($(‘#bjs‘).val());
139     } else if(currentTime >= finalGame && currentTime <= endGame) { //决赛
140         $("em.gameType").text($(‘#jsi‘).val());
141     } else {
142         $("em.gameType").text("");
143     }
144
145     if(currentTime >= endGame) {
146         clearInterval(dateInterval);
147     }
148 }
149 $(function(){
150     clearInterval(cdInterval);
151     cdInterval = setInterval(countDown,1000);
152 });
时间： 2024-08-04 21:17:19

使用js倒计时还有几天及计时过了几天的相关文章

js倒计时关闭当前页面代码

js倒计时关闭当前页面代码:很多网站在关闭网页之前会给出一个倒计时效果,这样可以让浏览者做到根据相应的情况进行操作,比较人性化,下面就通过实例代码介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

js倒计时函数和(js禁用和恢复a标签的操作)

<script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums(){ var get_cus_phone=$('.get_cus_phone').val();//得到消费者填写的的手机号 var reg = new RegExp("^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}|17[0-9]{9}$")

js 倒计时（可自定义时间）

原文 链接 http://www.cnblogs.com/liygheart/p/3605160.html <html> <head> <title>js 倒计时</title> </head> <body> <div> <h4>距离<input type="text" id="inputdate" value="2014-4-5"/> &

JS倒计时网页自动跳转代码

<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url) { var delay = document.getElementById("time").innerHTML; if(delay > 0) { delay--; document.getElem

Js倒计时程序

Js倒计时程序 点击下载

js倒计时功能

<input id="countdown" type="text" value="140时50分20秒"> <script> var oCountdown = document.getElementById("countdown"), nowStamps = Date.now() - 100, // 服务器当前时间 endStamps = Date.now() + 50000 - 100, // 活动结

JS倒计时、计时

倒计时 倒计时常用于发送验证码 前端代码如下: <!DOCTYPE html> <html> <head> <title>倒计时.计时</title> </head> <body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <input type="t

js倒计时，页面刷新时，不会从头计时

最近不忙,瞎鼓捣...哈哈 这里利用了H5的本地存储 localStorage,取秒数直接用了php的time()方法,就懒得用js取了. 把第一次访问页面时的时间存在客户端,然后再刷新的时候,比较用户第一次访问的时间和当前刷新时的时间. 这样就可以避免刷新的时候从头计时.当然方法有很多哈哈. <div id='xx'></div><script> var first_access_time = localStorage.getItem("first_acce

js倒计时，秒倒计时，天倒计时

按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date("January 14,2006"); var times="研究生考试"; var now = new Date(); var date = timedate.getTime() - now.getTime(); var time = Math.floor(date /