公司主营业务是体育赛事为主的；尤其是足球赛事。现正值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 });