Create a Simple 10 Second Countdown

Create a simple 10 second countdown

JavaScript has built in to it a function called setInterval, which takes two arguments - a function, callback and an integer, timeout. When called, setInterval will call the function you give it every timeout milliseconds.

For example, if you wanted to make an alert window every 500 milliseconds, you could do something like this.

function makeAlert(){ 
    alert("Popup window!");
};

setInterval(makeAlert, 500);

However, you don't have to name your function or declare it separately. Instead, you could define your function inline, like this.

setInterval(function(){ alert("Popup window!"); }, 500);

Once setInterval is called, it will run until you call clearInterval on the return value. This means that the previous example would just run infinitely. We can put all of this information together to make a progress bar that will update every second and after 10 seconds, stop updating.

var timeleft = 10;var downloadTimer = setInterval(function(){  if(timeleft <= 0){    clearInterval(downloadTimer);  }  document.getElementById("progressBar").value = 10 - timeleft;  timeleft -= 1;}, 1000);

<progress value="0" max="10" id="progressBar"></progress>

How do I create a simple 10 seconds countdown in Vue.js

Please check if this works for you.

<template>
   {{ countDown }}
</template>

<script>
    export default {
        data () {
            return {
                countDown: 10
            }
        },
        methods: {
            countDownTimer () {
                if (this.countDown > 0) {
                    setTimeout(() => {
                        this.countDown -= 1
                        this.countDownTimer()
                    }, 1000)
                }
            }
        },
        created () {
            this.countDownTimer()
        }
    }
</script>

Code for a simple JavaScript countdown timer?

var count=30;

var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     //counter ended, do something here
     return;
  }

  //Do code for showing the number of seconds here
}

To make the code for the timer appear in a paragraph (or anywhere else on the page), just put the line:

<span id="timer"></span>

where you want the seconds to appear. Then insert the following line in your timer() function, so it looks like this:

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}

How Can I create A 5 second Countdown timer with jquery that ends with a login popup?

How about:

var counter = 0;
var interval = setInterval(function() {
    counter++;
    // Display 'counter' wherever you want to display it.
    if (counter == 5) {
        // Display a login box
        clearInterval(interval);
    }
}, 1000);

Simple countdown timer C# showing Minutes and Seconds - already have minutes

You should be using a TimeSpan to describe the time left. This would allow you to format the time using custom format strings. I.e.

timeleft = TimeSpan.FromMinutes(20);
label3.Text = timeLeft.ToString("mm\\:ss");

You could also create an additional extension method that prints either minutes or seconds, depending on the remaining time. I.e. if more than one minute, show only minutes, otherwise show seconds. Or show both minutes and seconds if less than 5 minutes but more than 1 minute remaining.

How to write a countdown timer in JavaScript?

I have two demos, one with jQuery and one without. Neither use date functions and are about as simple as it gets.

Demo with vanilla JavaScript

function startTimer(duration, display) {    var timer = duration, minutes, seconds;    setInterval(function () {        minutes = parseInt(timer / 60, 10);        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ":" + seconds;
        if (--timer < 0) {            timer = duration;        }    }, 1000);}
window.onload = function () {    var fiveMinutes = 60 * 5,        display = document.querySelector('#time');    startTimer(fiveMinutes, display);};

<body>    <div>Registration closes in <span id="time">05:00</span> minutes!</div></body>

Simple Countdown Timer Typescript

You can use setInterval instead to make the function be called every 1 second until the counter reaches 0:

class Timer {
    constructor(public counter = 90) {

        let intervalId = setInterval(() => {
            this.counter = this.counter - 1;
            console.log(this.counter)
            if(this.counter === 0) clearInterval(intervalId)
        }, 1000)
    }
}

Or if you want something that looks like a for and uses setTimeout you could use async/await and Promisses (admittedly this might be overkill for this simple example):

function delay(delay: number) {
    return new Promise(r => {
        setTimeout(r, delay);
    })
}
class Timer {
    constructor(public counter = 90) {
        this.doTimer();
    }
    async doTimer() {
        for (let i = 0; i < this.counter; i++) {
            await delay(1000);
            this.counter = this.counter - 1;
            console.log(this.counter);
        }
    }
}

---

Related Topics