#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    6
    Rep Power
    0

    Website Clock with JS


    Hi. its pretty simple I got it already done but there is 1 lilttle problem.. My clock is showing the time based on the clients PC current time.. I want it to show the LOCAL PC time.. how is it possible?
    Here is my code:
    Code:
    <script type="text/javascript">
    
    	function updateClock ( )
    	{
    	  var currentTime = new Date();
    	
    	  var currentHours = currentTime.getUTCHours ( );
    	  var currentMinutes = currentTime.getUTCMinutes ( );
    	  var currentSeconds = currentTime.getUTCSeconds ( );
    	 
    	  currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
    	  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    	  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
    	
    	  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;
    	
    	  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    	}
    </script>
    with UTC functions it show the same time to everyone but still based on the clients pc time, so if the clients pc time is broken, the clock on website will be also broken..

    All I want is it to base the hour on a timestamp maybe, so everyone can see the same hour on website even if they have different hours on their pcs..
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    You will need to use something like Ajax or html5 for this because javascript is client side so it can only use the clients time
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    6
    Rep Power
    0
    Aw I also tried with
    Code:
    var currentTime = new Date(<?php echo time(); ?>);
    but then it doesnt update each second, it stays static..
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    That is not how it works but your making progress

    Code:
    	<script type="text/javascript">
    	$(document).ready(function(){   
    	//time.php is called every second to get time from server   
    	var refreshId = setInterval(function()   
    	{     
    	$('#timeval').load('/time.php?randval='+ Math.random());   
    	}, 1000);   
    	});
    	</script>
    time.php
    Code:
    <?php
    date_default_timezone_set('America/Los_Angeles');
    $date = date('Y/m/d H:i:s');
    echo "Server Time: $date";
    ?>
    this uses basic php and basic jquery to make a working clock but I do not recommend using this as it will reloade the time.php file every second so after 2000 seconds, 2000 reloads

    Comments on this post

    • Kekox agrees : thanks!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    6
    Rep Power
    0
    I pasted the jquery code on the index, made the time.php and this this on the clock box:

    Code:
    <p id="clock"> <?php include("time.php"); ?> </p>
    Time is showing okay but its not updating each second..
    Maybe I forgot to change some id or class on a tag.. is it okay like that?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    change #timeval to #clock

    Comments on this post

    • Kekox agrees : helpfull
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    6
    Rep Power
    0
    Originally Posted by jack13580
    change #timeval to #clock
    Done, time is static, its not updating..
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    are you including the jquery file needed, and above the jquery code?

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    Comments on this post

    • Kekox agrees : helpfull
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    6
    Rep Power
    0
    This is what I have:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- Source is http://mavswin.byethost7.com/falcon/ -->
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Web</title>
    	<link href="style.css" rel="stylesheet" type="text/css" />	
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){   
    			//time.php is called every second to get time from server   
    			var refreshId = setInterval(function()   
    			{     
    				$('#clock').load('/time.php?randval='+ Math.random());   
    			}, 1000);   
    		});
    	</script>
    </head>
    
    <body onload="">
    	<h2> GLOBAL TIME</h2>						
    	<p id="clock"> <?php include("time.php"); ?>  </p>
    </body>
    </html>
    And time.php
    Code:
    <?php
    date_default_timezone_set('America/Los_Angeles');
    $date = date('H:i:s');
    echo $date;
    ?>
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    Originally Posted by Kekox
    This is what I have:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- Source is http://mavswin.byethost7.com/falcon/ -->
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Web</title>
    	<link href="style.css" rel="stylesheet" type="text/css" />	
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){   
    			//time.php is called every second to get time from server   
    			var refreshId = setInterval(function()   
    			{     
    				$('#clock').load('/time.php?randval='+ Math.random());   
    			}, 1000);   
    		});
    	</script>
    </head>
    
    <body onload="">
    	<h2> GLOBAL TIME</h2>						
    	<p id="clock"> <?php include("time.php"); ?>  </p>
    </body>
    </html>
    And time.php
    Code:
    <?php
    date_default_timezone_set('America/Los_Angeles');
    $date = date('H:i:s');
    echo $date;
    ?>
    Sorry, I have been busy until now

    get rid of the / in $('#clock').load('/time.php?randval='+ Math.random());

    Comments on this post

    • Kekox agrees : Very helpfull!
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    6
    Rep Power
    0
    Working now! Thank you..
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    this uses basic php and basic jquery to make a working clock but I do not recommend using this as it will reload the time.php file every second so after 33.333 minutes, 2000 reloads and any page you clicked on your site and any css, js, or image you include will add to this number so it goes up fast which is why I recommend you don't use this

    the free webhost I use bans any IP for 24 hours that has done over 2,000 requests on any single website they host

IMN logo majestic logo threadwatch logo seochat tools logo