Таймер зворотнього відліку часу

Публікації

Інколи виникає потреба на сайті поставити таймер зворотнього відліку часу, який вираховує скільки часу залишилося до певної дати чи вираховує проміжок часу.

Для реалізації таймера створюємо функцію times яка приймає такі параметри: id - рядок з назвою id елемента в якому відображати час таймеру, seconds - кількість секунд з яких починати відлік часу, finish - не обов'язково вказувати, функція яка буде виконана після завершення відліку часу.

Основа роботи таймера є метод setTimeout який виконує функцію times через кожну секунду зменшуючи параметр seconds на 1.

times=function(id,seconds,finish){ if(seconds>0){ var s=parseInt(seconds%60), m=parseInt(seconds/60%60), h=parseInt(seconds/3600%24), d=parseInt(seconds/86400), res=''; if(d>0)res=d+' : '; if(seconds>3600)res+=(h<10?'0'+h:h)+':'; if(seconds>60)res+=(m<10?'0'+m:m)+':'; res+=(s<10?'0'+s:s); document.getElementById(id).innerText=res; setTimeout('times("'+id+'",'+(seconds-1)+','+finish+')',1000); } else{ document.getElementById(id).innerText='0'; if(finish)finish();} } times('test_timer',240); //times('test_timer',10, function(){alert('відлік часу завершено!')});

Таймер який вираховує час до вказаної дати і часу. Для реалізації таймера будемо використовувати метод Date.parse().

До Нового року залишилося:
timeEnd = function(id,dateEnd){ var d,h,m,s, t=Date.parse(dateEnd)-Date.parse(new Date()); if(t>0){ d=parseInt(t/86400000); h=parseInt(t/3600000%24); m=parseInt(t/60000%60); s=parseInt(t/1000%60); document.getElementById(id).innerHTML='<b>'+d+'</b> <sub>днів</sub> <b>'+h+'</b> <sub>г.</sub> <b>'+m+'</b> <sub>хв.</sub> <b>'+s+'</b> <sub>с.</sub>'; setTimeout('timeEnd("'+id+'","'+dateEnd+'");',1000); } else document.getElementById(id).innerHTML='час минув!'; } var rik=parseInt(new Date().getFullYear())+1; timeEnd('test',rik+'-01-01 00:00:00');

Модифікуємо таймер додавши параметр finish який буде приймати функцію яка буде виконана коли відлік часу завершиться. Додаємо стиль і додаємо 0 до годин, хвилин, секунд які менше 10.

timeEnd2 = function(id,dateEnd,finish){ var res='',d,h,m,s, t=Date.parse(dateEnd)-Date.parse(new Date()); if(t>0){ d=parseInt(t/86400000); h=parseInt(t/3600000%24); m=parseInt(t/60000%60); s=parseInt(t/1000%60); if(d>0)res=d+' <span class="timerSeperator">днів</span> '; res+=(h<10?'0'+h:h)+'<span class="timerSeperator">:</span>'+(m<10?'0'+m:m)+'<span class="timerSeperator">:</span>'+(s<10?'0'+s:s); document.getElementById(id).innerHTML='<span class="timer">'+res+'</span>'; setTimeout('timeEnd2("'+id+'","'+dateEnd+'",'+finish+');',1000); } else{ if(finish) finish() else document.getElementById(id).innerHTML='00:00:00'; } } timeEnd2('test2','2018-09-07 16:00:00', function(){alert('відлік часу завершено');});

Таймер зворотнього відліку до вказаної дати і часу на JavaScript із використанням CSS спрайтів:

timeEndCss = function(id,dateEnd){ function dn(n){return (n<10?'0'+n:n.toString());} var res='',d,h,m,s, t=Date.parse(dateEnd)-Date.parse(new Date()); if(t>0){ d=parseInt(t/86400000); h=parseInt(t/3600000%24); m=parseInt(t/60000%60); s=parseInt(t/1000%60); if(d>0){for(i=0,d=dn(d);i<d.length;i++)res+='<span class="tm'+d[i]+'"><span class="tm"></span></span>';res+='<span class="colons">:</span>';} for(i=0,h=dn(h);i<h.length;i++)res+='<span class="tm'+h[i]+'"><span class="tm"></span></span>';res+='<span class="colons">:</span>'; for(i=0,m=dn(m);i<m.length;i++)res+='<span class="tm'+m[i]+'"><span class="tm"></span></span>';res+='<span class="colons">:</span>'; for(i=0,s=dn(s);i<s.length;i++)res+='<span class="tm'+s[i]+'"><span class="tm"></span></span>'; document.getElementById(id).innerHTML=res+'<div style="clear: both;"></div>'; setTimeout('timeEndCss("'+id+'","'+dateEnd+'");',60); } else document.getElementById(id).innerHTML='час минув!'; } timeEndCss('test3','2019-09-09 23:32:00'); .tm{ display: inline-block; background: url("/_images/digits.png") no-repeat; width:53px; height:78px; float:left; } .tm0 .tm{background-position: 0 0px;} .tm1 .tm{background-position: 0 -462px;} .tm2 .tm{background-position: 0 -924px;} .tm3 .tm{background-position: 0 -1386px;} .tm4 .tm{background-position: 0 -1848px;} .tm5 .tm{background-position: 0 -2310px;} .tm6 .tm{background-position: 0 -2772px;} .tm7 .tm{background-position: 0 -3234px;} .tm8 .tm{background-position: 0 -3696px;} .tm9 .tm{background-position: 0 -4157px;} .colons{float:left;height:78px;font-size: 50px;}

Таймер зворотнього відліку на JavaScript на основі плагіну jQuery Countdown. Виконується аналогічно плагіну, не потребує jQuery.

countDown=function(el,optionsUser){ el=document.querySelector(el); var options={startTime:'58:45',stepTime:60,format:"dddd:hh:mm:ss",digitImages:6,digitWidth:53,digitHeight:77,timerEnd:function(){},image:'digits.png'}; for(a in optionsUser)options[a]=optionsUser[a]; el.style.height=options.digitHeight+'px'; var digits=[],interval; var createDigits=function(where){ var c=0; for(var i=1,ip,is;i<=options.startTime.length;i++){ ip=options.format.length-i; is=options.startTime.length-i; if(parseInt(options.startTime[is])>=0){ elem=document.createElement('div'); elem.className='cntDigit'; elem.style.height=(options.digitHeight*options.digitImages*10)+'px'; elem.style.width=options.digitWidth+'px'; elem.style.float='left'; elem.style.background='url(\''+options.image+'\')'; digits.unshift(elem); margin(0,-((parseInt(options.startTime[is])*options.digitHeight*options.digitImages))); digits[0].max=9; switch(options.format[ip]){ case'h': digits[0].max=(c==4?3:2); break; case'd': digits[0].max=9; break; case'm': digits[0].max=(c==2?9:5); break; case's': digits[0].max=(c==0?9:5); break; } c++; } else{ elem=document.createElement('div'); elem.className='cntSeparator'; elem.style.float='left'; elem.innerText=options.startTime[is]; } where.insertBefore(elem, where.firstChild); } }; var margin=function(elem,val){ if(val!==undefined) return digits[elem].style.marginTop=val+'px'; return parseInt(digits[elem].style.marginTop); }; var moveStep=function(elem){ digits[elem].digitInitial=-(digits[elem].max*options.digitHeight*options.digitImages); return function move(){ mtop=margin(elem)+options.digitHeight; if(mtop==options.digitHeight){ margin(elem,digits[elem].digitInitial); if(elem>0) moveStep(elem-1)(); else{ clearInterval(interval); for(var i=0;i<digits.length;i++) margin(i,0); options.timerEnd(); return; } if((elem>0)&&(digits[elem].condmax!==undefined)&&(digits[elem-1].digitInitial==margin(elem-1))) margin(elem,-(digits[elem].condmax*options.digitHeight*options.digitImages)); return; } margin(elem,mtop); if(margin(elem)/options.digitHeight%options.digitImages!=0) setTimeout(move,options.stepTime); if(mtop==0) digits[elem].ismax=true; } }; el.style.height=options.digitHeight; el.style.overflow='hidden'; createDigits(el); interval=setInterval(moveStep(digits.length-1),1000); }; countDown('#test4',{startTime:'23:03:17:05',image:'http://яваскрипт.укр/_images/digits.png'}); cd-wrapper{ display: inline-block; margin: 0 auto; } .cntSeparator{ font-size: 50px; line-height: 70px; margin: 0 10px; } .cd-wrapper .d div{ float: left; text-align: center; width: 104px; font-weight: bold; text-transform: uppercase; margin: 10px 0 0 36px; } .cd-wrapper .d div:first-child{ margin-left: 1px; }
Адмін 2017-10-14 21:43:59

Тільки зареєстровані користувачі можуть писати коментарі.