10 examples of 'javascript timer countdown with seconds' in JavaScript

247
function countdown(sec, eid) {
248
	document.getElementById(eid).innerHTML = sec;
249
	if (sec > 0) {
250
		setTimeout("countdown("+(sec-1)+", '"+eid+"')", 1000);
251
	} else {
252
		forwardto('index.tmpl')
253
	}
254
}

1
(function countdown(remaining) {
2
    if(remaining === 0)
3
        location.reload(true);
4
    else {
5
        document.getElementById('countdown').innerHTML = 'Refresh in: ' + remaining + ' sec';
6
        setTimeout(function(){ countdown(remaining - 1); }, 1000);
7
    }
8
})(120);

30
function Countdown_CountBack(secs) {
31
  if (secs < 0) {
32
    document.getElementById("Countdown_cntdwn").innerHTML = Countdown_FinishMessage;
33
    return;
34
  }
35
  DisplayStr = Countdown_DisplayFormat.replace(/%%D%%/g, Countdown_calcage(secs,86400,100000));
36
  DisplayStr = DisplayStr.replace(/%%H%%/g, Countdown_calcage(secs,3600,24));
37
  DisplayStr = DisplayStr.replace(/%%M%%/g, Countdown_calcage(secs,60,60));
38
  DisplayStr = DisplayStr.replace(/%%S%%/g, Countdown_calcage(secs,1,60));
39
40
  document.getElementById("Countdown_cntdwn").innerHTML = DisplayStr;
41
  if (Countdown_CountActive)
42
    setTimeout("Countdown_CountBack(" + (secs+Countdown_CountStepper) + ")", Countdown_SetTimeOutPeriod);
43
}

219
function countDown() {
220
    var remainSeconds = $("#remainSeconds").val();
221
    var timeout;
222
    if (remainSeconds > 0) {//秒杀还没开始，倒计时
223
        $("#buyButton").attr("disabled", true);
224
        $("#miaoshaTip").html("秒杀倒计时：" + remainSeconds + "秒");
225
        timeout = setTimeout(function () {
226
            $("#countDown").text(remainSeconds - 1);
227
            $("#remainSeconds").val(remainSeconds - 1);
228
            countDown();
229
        }, 1000);
230
    } else if (remainSeconds == 0) {//秒杀进行中
231
        $("#buyButton").attr("disabled", false);
232
        if (timeout) {
233
            clearTimeout(timeout);
234
        }
235
        $("#miaoshaTip").html("秒杀进行中");
236
        $("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId=" + $("#goodsId").val());
237
        $("#verifyCodeImg").show();
238
        $("#verifyCode").show();
239
    } else {//秒杀已经结束
240
        $("#buyButton").attr("disabled", true);
241
        $("#miaoshaTip").html("秒杀已经结束");
242
        $("#verifyCodeImg").hide();
243
        $("#verifyCode").hide();
244
    }
245
}

157
function countDown(){
158
	var remainSeconds = $("#remainSeconds").val();
159
	var timeout;
160
	if(remainSeconds > 0){//秒杀还没开始，倒计时
161
		$("#buyButton").attr("disabled", true);
162
		timeout = setTimeout(function(){
163
			$("#countDown").text(remainSeconds - 1);
164
			$("#remainSeconds").val(remainSeconds - 1);
165
			countDown();
166
		},1000);
167
	}else if(remainSeconds == 0){//秒杀进行中
168
		$("#buyButton").attr("disabled", false);
169
		if(timeout){
170
			clearTimeout(timeout);
171
		}
172
		$("#miaoshaTip").html("秒杀进行中");
173
		// $("#verifyCodeImg").attr("src", "/miaosha/verifyCode");
174
		flushVerifyCodeImg();
175
		$("#verifyCodeImg").show();
176
		$("#verifyCode").show();
177
		
178
	}else{//秒杀已经结束
179
		$("#buyButton").attr("disabled", true);
180
		$("#miaoshaTip").html("秒杀已经结束");
181
		$("#verifyCodeImg").hide();
182
		$("#verifyCode").hide();
183
	}
184
}

6
function countdownTick(ms) {
7
  if (ms < 0) return;
8
  console.log('sleep', ms);
9
  setTimeout(() => countdownTick(ms - 1000), 1000);
10
}

10
function Countdown(value, callback) {
11
	this.value = value;
12
	this.callback = callback;
13
}

4
function countdown() {
5
    // change state if counter is down
6
    if (counter <= 1) {
7
        state += 1
8
        if (state == 1) {
9
            counter = countdown_timeout_min
10
            step = 1
11
            delay = 60000
12
        }
13
        if (state == 2) {
14
            counter = 60
15
            step = 5
16
            delay = step * 1000
17
        }
18
        if (state == 3 || state == 5) {
19
            window.status = countdown_lock_expire
20
            state = 3
21
            counter = 1
22
            step = 1
23
            delay = 500
24
        }
25
        if (state == 4) {
26
            // blink the above text
27
            window.status = " "
28
            counter = 1
29
            delay = 250
30
        }
31
    }
32
33
    // display changes
34
    if (state < 3) {
35
        var msg
36
        if (state == 1) msg = countdown_lock_mins
37
        if (state == 2) msg = countdown_lock_secs
38
        window.status = msg.replace(/#/, counter)
39
    }
40
    counter -= step
41
42
    // Set timer for next update
43
    setTimeout("countdown()", delay);
44
}

9
start() {
10
    if (this.running) {
11
        return;
12
    }
13
    this.running = true;
14
    var tickerFn = () => {
15
        let diff = this.duration - (Date.now() - this.start);
16
        if (diff > 0) {
17
            setTimeout(tickerFn, this.granularity);
18
        } else {
19
            diff = 0;
20
            this.running = false;
21
        }
22
        this.tickFns.forEach((fn) => {
23
            fn(diff);
24
        });
25
    }
26
    this.start = Date.now();
27
    tickerFn();
28
}

553
start ({ onComplete, onTick }) {
554
  this.onCompleteCallback = onComplete
555
  this.onTickCallback = onTick
556
557
  this.counter = 3
558
  clearTimeout(this.timer)
559
  this._onTick()
560
}