What is the best way to create a timer using JavaScript?

Question

What is the best way to create a timer using JavaScript?

I'm looking for a reverse timer to track session timeout. I found a code on codepen that works as a clockwise timer, but my attempts to make it counterclockwise have failed. Can someone please suggest a solution? I want the timeout to be either 1 hour or 59 minutes and 59 seconds. Please assist me. Check out the Codepen demo here.

if((intervalCounter%1000)==0){
                currentTime += 1000;
                var appendHour = currentTime / (1000 * 60 * 60) | 0; 
                var appendMinute = currentTime % (1000 * 60 * 60) / (1000 * 60) | 0;
                var appendSecond = currentTime  % (1000 * 60) / 1000 | 0;

                appendHour = appendHour < 10 ? "0" + appendHour : appendHour;
                appendMinute = appendMinute < 10 ? "0" + appendMinute : appendMinute;
                appendSecond = appendSecond < 10 ? "0" + appendSecond : appendSecond;
                hour.html(appendHour);
                min.html(appendMinute);
                sec.html(appendSecond);

                }

javascript html css

Answer 1

Answer №1

This particular code snippet is designed to operate in the anti-clockwise direction. The example provided below should give you a better understanding of how it functions.

// Set the date we're counting down to
var countDownDate = new Date("July 5, 2019 15:37:25").getTime();

// Update the countdown every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Calculate the difference between now and the specified countdown date
  var distance = countDownDate - now;
    
  // Perform time calculations for days, hours, minutes, and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Display the results within an element with the id "demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the countdown has concluded, display a message
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>

Answer 2

This particular code snippet is designed to operate in the anti-clockwise direction. The example provided below should give you a better understanding of how it functions.

// Set the date we're counting down to
var countDownDate = new Date("July 5, 2019 15:37:25").getTime();

// Update the countdown every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Calculate the difference between now and the specified countdown date
  var distance = countDownDate - now;
    
  // Perform time calculations for days, hours, minutes, and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Display the results within an element with the id "demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the countdown has concluded, display a message
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>

What is the best way to create a timer using JavaScript?

Answer №1

Similar questions

Tips for stopping a Node.js for loop if it runs for more than 20 seconds

The z-index is preventing me from selecting a certain area

Restrict input to only text characters in a textbox using AngularJS

What is the best way to transfer the API Response Time from one Fetch function to a separate asynchronous function?

Retrieve and save files under a common directory

The relationship between formatting context and atomic inline-level boxes is crucial for understanding

Showing a group of users in real-time as they connect using Socket IO

What is the purpose of deserializing the user for every request using PassportJS?

Discovering the length of an array using JavaScript

Angular: Error when TypeScript object returns an array object value

Maintaining form data while dynamically including more instances of a <div> element to the form

troubles arise when using undeclared functions in javascript

Having trouble getting Firebase phone number authentication to work with Vue.js

The inner nested ng-repeat section is not properly binding to the scope variable and appears to be commented out

Struggling to navigate the world of JavaScript and find the sum of odd numbers?

Incorporating an NPM module into a React file: Webpack encounters resolution issues

Are there any methods to achieve smoother font icons on Firefox?

Moving information from Ajax to PHP

The Element Ui component fails to update when the prop of the Vue component changes

When an image is clicked, I would like it to redirect to a different page