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

What steps do I need to take to create an animation where an outline gradually becomes filled in

What steps can I take to ensure the proper formatting of the `select` input on Mac OS?

How can you deactivate the vue-router for specific routes? Is it possible to operate a single-page application backend while utilizing a non-single-page

Understanding the error handling in Express.js

Angular Controller is not able to retrieve the Route Parameter, resulting in a 404

Utilizing the principles of object orientation in Javascript to enhance event management

Has Jade stopped allowing inline variables unless enclosed by JavaScript markers?

Creating Custom Styles with Polymer for <content> Elements

Exporting SVG to image in Ionic is successful on Android devices, but the image gets cut off when viewed on

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Is there an issue with the JSON data?

Resizing images in different web browsers: Chrome, IE, and Safari

Adapting a CSS design

AngularJS RESTful Routing Masterclass

Strange CSS Problem: Button dysfunction in displays sized 13 inches or 15 inches

Remove Vue Component from the styling of current application

How can the value be accessed when using getElementById in Angular for <mat-select> elements that do not have a value attribute?

What are some ways to monitor the movement of elements and activate functions at precise locations?

Retrieve the latest entry from a JSON file containing epoch timestamps

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?