What is causing me to encounter an additional hour when computing time differences in JavaScript?

I am attempting to create a simple time difference calculation by subtracting the end time from the start time. However, I am noticing that I am getting an extra hour in my result. I believe this may be due to my timezone being GMT+1.

Regardless of the timezone issue, the time difference should remain accurate as both start and end times are in the same time zone.

You can view my code example in action here:

http://jsfiddle.net/kaze72/Rm3f3/

$(document).ready(function() {
    var startTime = (new Date).getTime();

    $("#endTime").click(function() {
        var endTime = (new Date).getTime();
        var difference = new Date(endTime - startTime);
        console.log(difference.getUTCHours() + ":" +
                difference.getUTCMinutes() + ":" +
               difference.getUTCSeconds());  
        console.log(difference.toLocaleTimeString());
    });
})

Answer №1

Understanding the representation and storage of dates in a Date object is crucial. Each Date acts as a wrapper around the number of milliseconds since 1970, also known as epoch time. When you subtract one date from another, you are not obtaining a new date but rather the difference in milliseconds between them.

One particular line in the code lacks coherence:

var diff = new Date(nu - tid1);

The correct approach should be:

var diffMillis = nu - tid1;

After calculating the difference in milliseconds, you can proceed to extract seconds, minutes, etc. as follows:

var seconds = Math.floor(diffMillis / 1000);
var secondsPart = seconds % 60;
var minutes = Math.floor(seconds / 60);
var minutesPart = minutes % 60;
var hoursPart = Math.floor(minutes / 60);
//...
console.log(hoursPart + ":" + minutesPart + ":" + secondsPart);  

You can view a working example on JSFiddle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I've noticed that whenever I attempt to update my array in useState using React Hooks, it does indeed work. However, I've also observed that the array seems to

import React,{useState} from "react"; const friendsList = [ { name:"Jack", age: 30, }, { name:"Emily", age: 28, }, { name:"Alex", age: 25, }, ] ...

Having trouble generating the Sencha Touch 2 jsb3 file, encountering a TypeError with 'undefined'?

Trying to configure and launch a Sencha Touch 2 application. Currently, I am following the instructions detailed in this guide: Upon executing sencha create jsb, I encountered the following error message: TypeError: 'undefined' is not a functio ...

Utilizing an Async API call from a separate page and passing it as a component input

I recently set up an asynchronous API fetch in one of my .JS files and then invoked it from another JS file to output the result using console.log. (Is there a more efficient method for achieving this?) Now, my aim is to utilize the fields of the response ...

Having trouble with $http.post function in AngularJS?

My code works fine when I use $http.get, but the parameters never reach the .php file if I use $http.post. This is the Service function: TestPanel.service('MySampleService', function ($http, $q) { this.getAllPosts = function () { ...

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

Successful Ajax request made within a loop to update a global variable

I am trying to set a global variable from a function and loop through AJAX calls to get the distance. However, I'm facing an issue where the nearestIndex variable always ends up being undefined. The first solution I came across was to use async: fals ...

angular.js watch() method is not functioning properly during a JSON call

I am trying to trigger a method whenever the value of my $http.selectedSong (model value) changes, but for some reason it is not working. Any ideas on why this could be happening?: app.controller('songController', ['$http', function($h ...

Choosing a specific page number - kendo grid

Currently, I am working on creating a grid using kendo-telrik. Let's say I have 100 data items, but in the JSON format, I only have 10 data items (assuming each page contains 10 data items for pagination). However, I want to display all the pages (10 ...

How can user data be logged in ASP.Net Core when a check box is selected?

Struggling to discover a way to secretly log user information such as their username when a checkbox is selected. The goal is to capture this data without the user's knowledge. Here is the code: This checkbox is a custom switch from MDB <div> ...

Experiencing perplexity due to receiving this error message: "Unable to access property 'checked' of an undefined or null reference."

When using .checked in a Function, it stops working and generates the following Error. I am currently utilizing Visual Studio 2015. Please assist. function GenderValidation(sender , e) { var male = document.getElementById('RadioButton_mal ...

The UseEffect hook continues to run even if the dependency (router.query) remains the same

useEffect(() => { console.log('applying filter'); const updatedFilters = { status: { values: { label: router.query.status, value: router.query.status }, }, // Add additional filter properties here... }; ...

What is the best way to pass an object into a method within a select element using Vue

Kindly review the following code snippet. <tr> <td>Select Timeslot</td> <td colspan="2"> <select class="form-control" v-on:change="onTimeSlotClick"> <option v-for="slot of slots"> <l ...

Warning: ComponentMounts has been renamed. Proceed with caution

I'm encountering a persistent warning in my application and I'm struggling to resolve it. Despite running npx react-codemod rename-unsafe-lifecycles as suggested, the error persists and troubleshooting is proving to be challenging. The specific w ...

Is it possible to determine if an AJAX request is still ongoing when a user returns to a webpage using jQuery or JavaScript?

Users on a specific page must click a 'generate' button to create details for a record. When the button is clicked, an ajax request is triggered to generate the record, which may take some time. $("#generate_record_button").on("cl ...

Loop through a collection of objects and combine their values

I'm struggling with what seems like a basic issue. I have an array that looks like this: var myArray = [{a:3, b:4, c:5}, {a:-1, b:3, c:5}, {a:0, b:-3, c:1}]; I need to create a loop to add up all the values for 'a', 'b', and &apo ...

Jquery refuses to conceal a particular element

I've encountered this issue before, but I'm facing a problem this time. I'm attempting to create a popup that is initially hidden. When clicked, the popup does appear, but I'm unable to close it. Additionally, when trying to change the ...

Filtering objects in JavaScript using a technique similar to list comprehension

I'm dealing with a basic array structure that resembles: obj = {1:false, 2:true, 3:true} My goal is to extract an array containing all the keys in the object that have a value of true. In Python, you can achieve this easily using: >>> [ke ...

How to surround values and keys with double quotes using regular expressions in JavaScript

I am in need of a valid JSON format to request ES. I currently have a string that looks like this: { time: { from:now-60d, mode:quick, to:now } } However, when I attempt to use JSON.parse, I encounter an error because my ...

Steps for bundling a Node server with an Electron application

I am looking to package my Electron app, built with React.js, along with a local Node server into a single executable file. Is there a way to ensure that the separate Node server runs simultaneously with the Electron app when the program is executed? ...

Unable to retrieve data function properties within Vue.Js Component methods

Looking for some help with setting up a welcome message using an input field in Vue.js. I am trying to store the username in a data property called username: ''. However, when I attempt to access it within the methods, I receive an error stating ...