О web-разработке
и даже немного больше...

Таймер обратного отсчёта

Вариант 1
Некоторые события на сайте удобно визуализировать с помощью таймера, который производит обратный отсчёт времени в секундах. Делюсь простым примером кода, который сполна выполняет данную задачу.

<script type="text/javascript">
function timer(){
var obj=document.getElementById('timer_inp');
obj.innerHTML--;
	if (obj.innerHTML==0){
		alert('Hello');
		setTimeout(function(){},1000);
	} else {
		setTimeout(timer,1000);
	}
}
setTimeout(timer,1000);
</script>
<div>Осталось: <span id="timer_inp">10</span> сек.</div>

Между тегом span необходимо установить своё значение (в секундах), от которого будет производится обратный отсчет. По истечению времени счетчика в примере появляется модальное окно с надписью Hello.

В месте, где вызывается сообщение alert(‘hello’), можно добавить свою логику, которая будет выполняться по окончанию отсчёта.

Demo — пример 1

Вариант 2
Данный вариант отличается от предыдущего тем, что визуализация обратного отсчета производится с показом остатка дней/часов/минут/секунд. Более удобен для больших временных интервалов, по понятным причинам что показывать к примеру: неделю в секундах — не очень то прикольно будет выглядеть. Приведенный ниже код использует библиотеку JQuery, поэтому её следует предварительно подключить.

<div>
<span>Осталось:&nbsp;</span><span class="afss_day_bv">0</span> д.
<span class="afss_hours_bv">00</span>&nbsp;час.&nbsp;
<span class="afss_mins_bv">00</span>&nbsp;мин.&nbsp;
<span class="afss_secs_bv">00&nbsp;</span>&nbsp;сек.
</div>

<script type="text/javascript">//<![CDATA[
var remain_bv	= 80768;
function parseTime_bv(timestamp){
	if (timestamp < 0) timestamp = 0;

	var day = Math.floor( (timestamp/60/60) / 24);
	var hour = Math.floor(timestamp/60/60);
	var mins = Math.floor((timestamp - hour*60*60)/60);
	var secs = Math.floor(timestamp - hour*60*60 - mins*60); 
	var left_hour = Math.floor( (timestamp - day*24*60*60) / 60 / 60 );

	$('span.afss_day_bv').text(day);
	$('span.afss_hours_bv').text(left_hour);

	if(String(mins).length > 1)
		$('span.afss_mins_bv').text(mins);
	else
		$('span.afss_mins_bv').text("0" + mins);
	if(String(secs).length > 1)
		$('span.afss_secs_bv').text(secs);
	else
		$('span.afss_secs_bv').text("0" + secs);
	
}

$(document).ready(function(){
	setInterval(function(){
		remain_bv = remain_bv - 1;
		parseTime_bv(remain_bv);
		if(remain_bv <= 0){
			alert('Hello');
		}
	}, 1000);
});
//]]>
</script>

Demo — пример 2

Опубликован: 23.07.2014 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  1. Евгений пишет:

    Вот мой варик

        var ts = 10;//600
        var div = document.getElementById('timer');
        
        function newstime(){
            var interval = setInterval(function(){
                ts = ts - 1;
                var day = Math.floor( (ts/60/60) / 24);
                var hour = Math.floor(ts/60/60);
                var left_hour = Math.floor( (ts - day*24*60*60) / 60 / 60 );
                var mins = Math.floor((ts - hour*60*60)/60);
                var secs = Math.floor(ts - hour*60*60 - mins*60);
                div.innerHTML = ""+mins+""+":"+""+secs+"";
                if(ts &lt;= 0){
                    clearInterval(interval);
                }
            }, 1000)
    
        } 
        newstime(ts);
    

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта