将计时器添加到ejs文件中

Question

我正在进行一个个人项目，在这个个人项目中，我试图实现一个倒计时计时器。然而，对于Node和ejs文件类型，这似乎是不可能的。如果有人知道如何在ejs文件中包含倒计时计时器，任何帮助都会很好。我想了解一些基础知识，以便在需要的时候将其实现到其他项目中。请注意，我正在为该项目使用node-js、express、MySQL和passport。

提前感谢您的时间和耐心！

Answer 1

您可以获取当前时间戳并将其添加为倒计时时间。然后，您可以通过带有时间戳的子动作来获取剩余时间。

当前时间戳由Javascript中的Date.now((方法返回。

请注意，时间戳是以毫秒为单位获得的。渲染时要小心。

例如，如果我想要十分钟倒计时：

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

渲染前的代码既可以在节点服务器上执行，也可以在浏览器上执行。您可以使用.js浏览器文件(检查您的公用文件夹，您可以在express上配置它，这样这个文件夹将被EJS作为获取路径的目标(或在.EJS模板上的脚本标记上呈现它(在将页面发送到客户端之前，在服务器上执行写在EJS的<%和%>内容上的代码，但js外部文件和脚本标记上的代码作为客户端javascript执行(.

我希望这对你有所帮助。继续

Answer 2

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