将计时器添加到ejs文件

Question

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

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

Answer 1

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

Answer 2

您可以获取当前时间戳并将其添加到倒计时时间。然后，你可以用时间戳减去剩余时间。

当前时间戳由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 浏览器文件渲染它（检查你的 public 文件夹，你可以在 express 上配置它，所以这个文件夹将被 EJS 定位为获取路径）或在你的 .ejs 模板上的脚本标签上（写在ejs的<%和%>东西上的代码在发送页面到客户端之前在服务器上执行，但是js外部文件和脚本标签上的代码执行为client-sidejavascript）。

希望对您有所帮助。继续！

将计时器添加到ejs文件

Add timer to ejs file

html

javascript

mysql

node.js

express