Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

195
Visualizações
Add timer to ejs file

I am working on a personal project and in this personal project, I am trying to implement a countdown timer. However, it seems that this is impossible with Node and an ejs file type. If anyone knows how to include a countdown timer into an ejs file, any help would be nice. I would like to know the basics so that way I can implement this into other projects if need be. Please note that I am using node js, express, MySQL, and passport for the project.

Thank you for your time and patience in advance!

over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

You can get the current timestamp and add it the countdown time. Then, you can get the remaining time via substraction with the timestamp.

The current timestamp is returned by the Date.now() method in Javascript.

Note that the timestamp is obtained in milliseconds. Beware on rendering.

For example, if I want a ten minutes countdown:

// Ten minutes to seconds to milliseconds
const countdownTime = 10 * 60 * 1000;

// The countdown end instant is calculed by the addition of the current time when timer is created. 
const expireTime = Date.now() + countdownTime;

...

// Now, if you want to calculate the remaining time (in milliseconds):
remainingTime = expireTime - Date.now();

// If you want to know if countdown has reached its end: 

isEnded = Date.now() < expireTime;

...

// I don't know how do you want to implement the UI for showing the countdown stuff, but I recommend to convert the time in milliseconds to h, m, s only on browser at render time.
// Here is an implementation that I made for a pomodoro application:

function msToHHMMSS(timeInMs) {
  const timeInSeconds = timeInMs / 1000;
  const s = timeInSeconds % 60;
  const m = Math.floor(timeInSeconds / 60) % 60;
  const h = Math.floor(timeInSeconds / 3600);
  // You can use the returned values separately where do you want
  return [h, m, s];
};

// Use array inferencing for extracting values from the returned array
const [hours, minutes, seconds] = msToHHMMSS(remainingTime);

// For example, if I want to use an element with the "timer" ID for rendering the countdown time on browser:

 document.getElementById("timer").innerText(`${hours}:${minutes}:${seconds}`)

// if you want to show the hms always with 2 digits each, you can use padStart after converting to string:

document.getElementById("timer").innerText(`${hours.toString().padStart(2, "0")}: ...and so on`

// The render should be upgraded once on a second. You can use the setInterval for that.

Code before rendering can be executed both: on the node server or on browser. You can render it using a .js browser file (check your public folder, you can configure it on express, so this folder will be targetted by EJS for getting the path) or on a script tag on your .ejs template (code written on ejs's <% and %> stuff is executed on server before sending the page to the client, but code of js external files and on script tag is executed as client-side javascript).

I hope this helped you. Carry on!

over 4 years ago · Santiago Trujillo Relatório

0

<div class="content-wrapper" style="min-height: 823px;">

    <div class="modal fade" id="formModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <h1 class="m-0 text-dark mt-3">Room close in: <span id="timer"></span></h1>
            </div>
        </div>
    </div>

</div>

<script>


        function callMe(data) {
            document.getElementById('names').value = data;
            $('#formModel').modal('show');
        }

        document.getElementById('timer').innerHTML = '2:00';

        startTimer();
        function startTimer() {
            var presentTime = document.getElementById('timer').innerHTML;
            var timeArray = presentTime.split(/[:]+/);
            var m = timeArray[0];
            var s = checkSecond((timeArray[1] - 1));
            if (s == 59) { m = m - 1 };
            if (m < 0) {
                window.location.reload()
                return;
            }

            if (s < 10 && m == "00") {
                document.getElementById("clicable1").disabled = true;
                document.getElementById("clicable2").disabled = true;
                document.getElementById("insert").disabled = true;
            }

            document.getElementById('timer').innerHTML = m + ":" + s;
            setTimeout(startTimer, 1000);
        }

        function checkSecond(sec) {
            if (sec < 10 && sec >= 0) { sec = "0" + sec };
            if (sec < 0) { sec = "59" };
            return sec;
        }
</script>
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda