將計時器添加到ejs檔案

我正在做一個個人專案，在這個個人專案中，我正在嘗試實作一個倒數計時器。但是，對于 Node 和 ejs 檔案型別，這似乎是不可能的。如果有人知道如何在 ejs 檔案中包含倒數計時器，那么任何幫助都會很好。我想了解基礎知識，以便在需要時將其實施到其他專案中。請注意，我正在為該專案使用節點 js、express、MySQL 和護照。

提前感謝您的時間和耐心！

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您可以獲取當前時間戳并將其添加到倒計時時間。然后，您可以通過與時間戳相減得到剩余時間。

當前時間戳由 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 執行）。

我希望這對你有所幫助。繼續！

標籤：javascript html mysql 节点.js 表示

上一篇：為什么“Checkboxhack”對我的3d元素不起作用？

下一篇：哪個給定選項是/等價于以下規則？