实时时钟JavaScript从我的自定义时间开始

Question

I was trying to create a live/dynamic clock is based on my custom time instead of system time.

There are many scripts, but I couldn't find the clock starts from my custom time.

Here is an example that I'm trying to modify. The problem is the seconds doesn't change, and it looks like I need to use ajax. Is there any way to do it without ajax? If not, help me to do it using ajax!!! The reason I don't like ajax method is that another page should be called and refreshed, so it will eat server ram.

ex) http://www.javascriptkit.com/script/cut2.shtml

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

The reason your clock isn't moving is because it's using the hours, minutes and seconds values set by the server when the page was originally rendered, as opposed to a fresh new Date() instance created each time show() is called. You'll want to take advantage of JavaScript's built in Date object to create an accurate clock, as setTimeout isn't known for its accuracy and building your own clock would be a hassle (imaging having to worry about leaps years and daylight savings and stuff!).

What I'd recommend is to adjust the clock value each time show() is called using the difference between your custom time and the real time. For example, if your custom time is 30 minutes behind the real time, you can call:

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()
   // ..
}

Fiddle

Hope this helps!