Add timer to ejs file-CodePudding

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!

CodePudding user response：

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

    <div  id="formModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div  role="document">
            <div >
            <h1 >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>

CodePudding user response：

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!