Как сделать обратный отсчет, а затем появление кнопочки?

Question

[Ян]

Здравствуйте!
Нужна такая фишка на js, сначала идет надпись по типу "Ожидайте n секунд" и обратный отсчет на n, после окончания вместо надписи появляется кнопочка.
Как реализовать? В JS я полный 0.

Answer 1

[Дмитрий Баракин]

Код ниже работает при подключенном JQuery

HTML:

<div id="timerBlock">
        <p>Ожидайте <span class="seconds">10</span> секунд</p>
    </div>

JavaScript:

var timerBlock = $('.seconds');
var num = 10; //количество секунд

var index = num;
var timerId = setInterval(function() {
  timerBlock.html(--index);
}, 1000);

setTimeout(function() {
  clearInterval(timerId);
  $('#timerBlock').html('<button>hello!</button>')
}, num*1000);

Comments

[Faha1998]

Как прекрасен jquery в таких фичаъ

[Дмитрий Баракин]

Фахриддин Абдурахимов: чтобы не терять время, писал код в своём проекте (который был открыт в редакторе), а там уже был подключен JQuery. Я думаю, если автору вдруг понадобится производительность, оно перепишет всё это без JQuery :)

[Игорь Павленко]

Дмитрий Баракин: почему не так?

var timerBlock = $('.seconds');
var num = 10; //количество секунд

var timerId = setInterval(function() {
timerBlock.html(--num);
}, 1000);

setTimeout(function() {
clearInterval(timerId);
$('#timerBlock').html('hello!');
}, num*1000);

[Дмитрий Баракин]

Игорь Павленко: всё верно, лучше так!

Answer 2

[Stalker_RED]

Например так https://jsfiddle.net/gsxfq7k6/

Comments

[Сергей Соколов]

после нулевой секунды перед кнопкой проходит ещё одна секунда, лишняя.

[Stalker_RED]

Замените в таймере >= на >

Answer 3

[Сергей Соколов]

Набросал примитивный jQuery плагин для таймера обратного отсчёта (фиддл).

// создание jQuery плагина
(function($){
	var timebomb = function(){};

	timebomb.prototype = {
		defaults: {
			time		: 5,	// по умолчанию время в секундах
			countdown	: '%COUNTDOWN% с. осталось',
			prize		: 'Ура!',
		}
		,init: function($el, opts) {
			this.el = $el;
			this.opts = $.extend({}, this.defaults, opts || {});
			this.finish = (new Date).getTime() + 1000*this.opts.time;
			this.update();
			this.interval = window.setInterval( this.update.bind(this), 50);
		}
		,update: function() {
			var toGo = Math.round( (this.finish - (new Date).getTime())/1000);
			if( toGo > 0) this.el.html( this.opts.countdown.replace('%COUNTDOWN%', toGo));
			else {
				window.clearInterval( this.interval);
				this.el.html( this.opts.prize);
			}
		}
	};

	$.fn.timebomb = function(opts) {
		var tb = new timebomb();
		tb.init(this, opts);
	}
})( jQuery);


// применение
$('#timer-1').timebomb({
	time: 6,
	countdown: 'Ждите ещё %COUNTDOWN% секунд',
	prize: '<button type="button" class="btn btn-success">Жми!</button>',
});

$('#timer-2').timebomb({time: 11});

Answer 4

[Кирилл]

function countDown(second,endMinute,endHour,endDay,endMonth,endYear) {
var now = new Date();
second = (arguments.length == 1) ? second + now.getSeconds() : second;
endYear = typeof(endYear) != 'undefined' ? endYear : now.getFullYear();
endMonth = endMonth ? endMonth - 1 : now.getMonth(); //номер месяца начинается с 0
endDay = typeof(endDay) != 'undefined' ? endDay : now.getDate();
endHour = typeof(endHour) != 'undefined' ? endHour : now.getHours();
endMinute = typeof(endMinute) != 'undefined' ? endMinute : now.getMinutes();
//добавляем секунду к конечной дате (таймер показывает время уже спустя 1с.)
var endDate = new Date(endYear,endMonth,endDay,endHour,endMinute,second+1);
var interval = setInterval(function() { //запускаем таймер с интервалом 1 секунду
var time = endDate.getTime() - now.getTime();
if (time < 0) { //если конечная дата меньше текущей
clearInterval(interval);
alert("Неверная дата!");
} else {
var days = Math.floor(time / 864e5);
var hours = Math.floor(time / 36e5) % 24;
var minutes = Math.floor(time / 6e4) % 60;
var seconds = Math.floor(time / 1e3) % 60;
var digit=''+
'';
var text=''
var end=':'
document.getElementById('mytimer').innerHTML = 'осталось: '+
digit+days+text+'Дней'+end+digit+hours+text+'Часов'+end+
digit+minutes+text+'Минут'+end+digit+seconds+text+'Секунд';
if (!seconds && !minutes && !days && !hours) {
clearInterval(interval);
echo {'Кнопка'};
}
}

}
}
countDown(30); //устанавливаем таймер на 30 секунд

Comments

[Кирилл]

или

Осталось: 0 д.
00 час. 
00 мин. 
00  сек.

[Кирилл]

<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>

[Роман Григорьев]

чёт в голос