<input type=button value=
'Get Server Time' onclick="timer_function();">
To this script we will add a timer to recursively call the same Ajax function in every second. This will get data from every second so we can display a changing clock showing server time.
function timer_function(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('AjaxFunction();',refresh)
}
function timer_function(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('AjaxFunction();',refresh)
}
At the end of AjaxFunction() we will call again our timer_function() to make it recursive.
tt=timer_function();
In the main AjaxFunction() we send request to ajax-server-clock-demock.php file and get the server time. This data is displayed using a div layer.
if(httpxml.readyState==4)
{
document.getElementById("msg").innerHTML=httpxml.responseText;
document.getElementById("msg").style.background='#f1f1f1';
}
<?Php
echo date("d/m/y : H:i:s", time());
?>
You can change the display format of the clock by changing the above code.
<html>
<head>
<title></title>
<script type="text/javascript">
function AjaxFunction()
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck()
{
if(httpxml.readyState==4)
{
document.getElementById("msg").innerHTML=httpxml.responseText;
document.getElementById("msg").style.background='#f1f1f1';
}
}
var url="ajax-server-clock-demock.php";
url=url+"?sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
tt=timer_function();
}
///////////////////////////
function timer_function(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('AjaxFunction();',refresh)
}
</script>
</head>
<body>
<div id="msg"></div>
<br>
<input type=button value='Get Server Time' onclick="timer_function();">
</body>
</html>
ultimate777 | 09-04-2015 |
Is there a way to do this without the button? So that the time from server is displayed when the page is loaded ? Thanks in advance. |
smo | 09-04-2015 |
Yes, just add onload to body tag, like this <body onload=timer_function();> |
melad | 19-04-2015 |
hi there thx u very much but i have some problem to show javascript in same page not call other url , coz it take some time so now i have this code $now = new DateTime(null, new DateTimeZone('America/New_York')); $now->setTimezone(new DateTimeZone('Europe/London')); echo $now->format("h:i:s A"); how can i replace this code with this var url='ajax-server-clock-demock.php'; and i then can see the DateTimeZone with refresh witout called and url i hobe ur anderstand me thx u |