Estoy trabajando en un proyecto personal y en este proyecto personal, estoy tratando de implementar un temporizador de cuenta regresiva. Sin embargo, parece que esto es imposible con Node y un tipo de archivo ejs. Si alguien sabe cómo incluir un temporizador de cuenta regresiva en un archivo ejs, cualquier ayuda sería buena. Me gustaría saber los conceptos básicos para poder implementar esto en otros proyectos si es necesario. Tenga en cuenta que estoy usando node js, express, MySQL y Passport para el proyecto.
¡Gracias por su tiempo y paciencia de antemano!
Puede obtener la marca de tiempo actual y agregarla al tiempo de cuenta regresiva. Luego, puede obtener el tiempo restante mediante la resta con la marca de tiempo.
La marca de tiempo actual es devuelta por el método Date.now() en Javascript.
Tenga en cuenta que la marca de tiempo se obtiene en milisegundos. Cuidado con el renderizado.
Por ejemplo, si quiero una cuenta regresiva de diez minutos:
// 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.El código antes de la representación se puede ejecutar tanto: en el servidor del nodo como en el navegador. Puede representarlo usando un archivo de navegador .js (verifique su carpeta pública, puede configurarlo en express, por lo que EJS seleccionará esta carpeta para obtener la ruta) o en una etiqueta de secuencia de comandos en su plantilla .ejs (código escrito en Las cosas <% y %> de ejs se ejecutan en el servidor antes de enviar la página al cliente, pero el código de los archivos externos js y en la etiqueta del script se ejecuta como javascript del lado del cliente).
espero que esto te ayude. ¡Continuar!
<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>