The live clock on my website is set to start ticking from a time of

I've been attempting to create a real-time clock that is based on my own custom time instead of the system time.

Despite searching through numerous scripts, I have yet to find one that allows me to set the clock's starting time to my custom input.

Here is an example script that I am looking to modify. The issue I'm facing is that the seconds do not update automatically, leading me to believe that I may need to utilize ajax. Is there a way to achieve this without using ajax? If not, please assist me in implementing it with ajax! I am hesitant about the ajax method because it requires calling and refreshing another page, potentially consuming server memory.

ex)

Before:

<script> 
function show(){ 
var Digital=new Date() 
var hours=Digital.getHours() 
var minutes=Digital.getMinutes() 
var seconds=Digital.getSeconds() 
... 
... 

After:

<script> 
function show(){ 
var Digital=new Date() 
var hours=<?php echo $hr; ?>; 
var minutes=<?php echo $min; ?>; 
var seconds=<?php echo $sec; ?>; 
... 
... 

Answer №1

Your clock seems to be stuck because it is relying on the initial values set by the server when the page loaded, instead of updating with a new Date() instance each time the clock function is called. It's best to use JavaScript's built-in Date object for accurate timekeeping, rather than relying solely on setTimeout, which isn't always precise and can be a headache to manage (think leap years and daylight savings!).

To fix this, I suggest adjusting the clock value dynamically within the show() function by calculating the difference between your custom time and the real time. For instance, if your custom time is 30 minutes behind, you can adjust it like this:

function show() {
   var Digital = new Date();
   Digital.setMinutes(Digital.getMinutes() - 30); // Rewind 30 minutes
   var hours = Digital.getHours()
   var minutes = Digital.getMinutes()
   var seconds = Digital.getSeconds()
   // ..
}

Check out this helpful Fiddle for reference.

I hope this information proves useful in resolving the issue!

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

Error is being returned by the JSONP callback

Looking to grasp JSONP. Based on my online research, I've gathered that it involves invoking a function with a callback. Other than that, is the way data is handled and the data format similar to JSON? I'm experimenting with JSONP as shown below ...

Utilize JSON parsing with AngularJS

My current code processes json-formatted text within the javascript code, but I would like to read it from a json file instead. How can I modify my code to achieve this? Specifically, how can I assign the parsed data to the variable $scope.Items? app.co ...

Is the Ajax call being triggered unexpectedly?

I've been working on an Ecommerce website and everything was going smoothly until the update_cart (quantity) code started submitting my form instead of updating it. I've tried making changes and even moving it outside the form, but the issue rema ...

What could be the reason for Node.childNodes not displaying all nodes within a Vue.js single file component?

Referenced from MDN The Node.childNodes property obtains a dynamic NodeList that consists of all child nodes within the specified element, starting with index 0. Child nodes can comprise elements, text, and comments. This functionality performs as antic ...

Removing an element from an object using ng-model when its value is empty is a standard practice

Utilizing the $resource service to access and modify resources on my API has been a challenge. An issue arises when the ng-model-bound object's value is set to empty - the bound element is removed from the object. This results in the missing element ...

React components featuring Material UI icons

I'm in need of assistance. I am looking for the Material UI icons, but I can't seem to find any information on how to obtain them. https://i.stack.imgur.com/FAUc7.jpg ...

The nodejs events function is being triggered repeatedly

I have been developing a CMS on nodejs which can be found at this link. I have incorporated some event hooks, such as: mpObj.emit('MP:FOOTER', '<center>MPTEST Plugin loaded successfully.</center>'); Whenever I handle this ...

Talebook: Unable to modify UI theming color

As I embark on creating my own theme in Storybook, I am closely following the guidelines outlined here: Currently, I have copied the necessary files from the website and everything seems to be working fine. However, I am facing an issue when trying to cus ...

Navigating the complexity of JavaScript promises when trying to execute two functions sequentially can be

Currently, I have funcA, funcB, arrayA, and arrayB in my code. In funcA, arrayB gets populated by fetching external information, and the time it takes to do this can vary. I want to trigger funcB once arrayB.length equals arrayA.length. ArrayB is a global ...

Sequelize Error: Property 'max' is not defined on the object

There seems to be a problem with my model being undefined. This is how I have set up my code: db.js const fs = require("fs"); const path = require("path"); const Sequelize = require("sequelize"); const basename = path.basename(module.filename); const env ...

Ways to divide a fixed angular variable into individual variables

Currently, I am working on a code that requires me to integrate an inputted dimension as the width and height of the displayed image. The specified dimension format is 300x250, and the image's height and width should adjust accordingly. The piece of ...

For each item they possess, attach a "!" at the end

Given an array, I am trying to use map to add an exclamation mark to each item in the array. For example: Before - items: ["ball", "book", "pen"] After - items: ["ball!","book!","pen!"] const array = [ { username: "john", team: "red", score: 5 ...

Adding Information to Flot

I'm struggling to showcase an array of data using a Flot graph. My method involves jQuery Ajax/PHP/MySQL. I created the array with this PHP/MySQL code: $result = mysql_query("SELECT * FROM happiness"); $array = array(); while($row = mysql_fetc ...

Upon clicking, the reset function will be triggered

I have a jQuery code that includes a click event on td elements. After clicking on a td, an input field with text appears and the focus is set at the end of the text. However, I want to remove the focus after the initial click so that I can click in the ...

Exploring the functionality of Protractor testing in combination with Angular 2, focusing

I am currently developing an Angular 2 application and I require some information regarding unit testing with Protractor. Previously, in Angular 1, we were able to check for things like: element(by.css('[ng-click="myFunction()"]')) in our test ...

combine two events using jquery when clicking

I'm currently working on developing a simple user interaction feature that involves using a single button to start and stop recording audio, similar to the functionality in WhatsApp. I've done some research on Stack Overflow to see if I could fin ...

Utilizing Jquery Sweet Alert for a Custom Confirmation Pop-up

I am trying to incorporate a confirm() in JavaScript using the popular Sweet Alert plugins, but for some reason it is not working as expected. Below is the snippet of my code: function vehicles(param) { if (swal({ title: "Are you ...

Pass an array of data from an AngularJS application to a WebAPI endpoint, then retrieve and process that

Imagine having an array within the client-side model: vm.dataSheets = [ { value: 0, text: localize.getLocalizedString('_ProductsAndServices_'), selected: selected}, { value: 1, text: localize.getLocalizedString('_Hol ...

Unable to append comment value to camVariable

I need to update the 'comment' item in my selectedDocuments object with a new value. I want to display an input field in a form where the values of the selectedDocuments object are rendered, and upon submitting this input, I want it to be added t ...

Leverage Async/Await in React.js with the Axios Library

Recently, I came across an interesting article on Medium titled How to use async/await with axios in react The article discussed making a simple GET request to a server using Async/Await in a React.js App. The server returned a JSON object at /data with t ...