Hi
I am new to Javascript and I'm trying to build a web page using Google maps that changes the date and time on the clock that's displayed on the page when ever you change time zones. Any help will be much appreciated.
Here is the code I have at the moment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="polytime.css" title="stylesheet"/>
<title>Clock</title>
<script
src="type="text/javascript"></script>
<script type="text/javascript">
<!--
function clock(){ // The current time.
var t = new Date();
var daynow = t.getDay();
var zone = t.getTimezoneOffset() * 60000;
var monthnow = t.getMonth();
var weekday = t.getDate();
var yearnow = t.getYear();
var hours = t.getHours();
var min = t.getMinutes();
var sec = t.getSeconds();
var status = "AM";
var tzone = new Array("13 hours ahead of","12 hours ahead of","11 hours ahead of","10 hours ahead of","9 hours ahead of","8 hours ahead of","7 hours ahead of","6 hours ahead of","5 hours ahead of","4 hours ahead of","3 hours ahead of","2 hours ahead of","1 hour ahead of","in","1 hour behind","2 hours behind","3 hours behind","4 hours behind","5 hours behind","6 hours behind","7 hours behind","8 hours behind","9 hours behind","10 hours behind","11 hours behind","12 hours behind");
var day = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday");
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
var monthdate = new Array("0th","1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th",
"11th","12th","13th","14th","15th","16th","17th","18th","19th","20th",
"21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th",
"31st");
zone /= 60;
zone += 13;
if (yearnow < 2000)
yearnow += 1900;
if (hours > 11)
status = "PM";
if (hours > 12)
hours -= 12;
if (hours == 0)
hours = 12;
if (min < 10)
min = "0" + min;
if (sec < 10)
sec = "0" + sec;
window.setTimeout ("clock()", 900);
document.clock.time.value ="It is: " + hours + ":" + min + ":" + sec + " " + status + " on " + day[daynow] + ", " + month[monthnow] + " " + monthdate[weekday] + ", " + yearnow + ". You are " + tzone[zone] + " GMT.";
}
//-->
</script>
<script type="text/javascript">
function go() {
lng = parseFloat(document.getElementById("maahan").value.split(",")[0]);
lat = parseFloat(document.getElementById("maahan").value.split(",")[1]);
scale = parseInt(document.getElementById("maahan").value.split(",")[2]);
map.setCenter(new GLatLng(lat,lng),scale);
//map.setCenter(new GLatLng(lat,lng),scale);
}
</script>
</head>
<body onLoad="clock()">
<div id="novel">
<form action="#" onsubmit="showAddress(this.haku.value);addCity(this.haku.value); return false">
<h5>Town,city or country required:</h5>
<input type="text" size="40" id="haku" name="haku" title="Type an address"/>
<input type="submit" id="hae" value=" >> " title="You can hit enter key as well"/>
</form>
<span id="calcZone" title="1 hour / 15 degrees"></span>
<span id="checkedZone" title = "The clock is set accordingly"></span>
</div>
<div id="clock">
<form name="clock">
<input type="text" name="time" size="100" style="text-align: center; border: 0; font-family: Times New Roman; font-size: 12.0pt;" readonly>
</form>
</div>
<div id="map"></div>
<script type="text/javascript">
//City selector
function addCity(city){
//var n = document.getElementById('hardPresets').options.length;
//document.getElementById('hardPresets').options[n] = new Option(city);
}
function removeCity(k){
document.getElementById('hardPresets').options[k] = null;
}
//Map
var Tsize = new GSize(156, 156);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.42661449707482, -0.087890625),4);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl(1));
map.setMapType(G_HYBRID_MAP);
map.addControl(new GOverviewMapControl());
new GKeyboardHandler(map);
GEvent.addListener(map,'moveend',function(){
});
///Geo
var geocoder = new GClientGeocoder();
function showAddress(address){
geocoder.getLatLng(address,function(point){
if(!point){
document.getElementById('haku').style.color = 'red';
}
else{
map.panTo(point);
document.getElementById('haku').style.color = 'black';
}})}
var offset = 0;
function drawDish(){
offset = Math.floor((clockPoint.lng()+7.5)/15);
map.addOverlay(polygon);
document.getElementById('calcZone').innerHTML = " "; + offset;
document.getElementById('checkedZone').innerHTML = " ";
}
//EarthTools
function eTools(){
var lati = map.getCenter().lat();
var longi = map.getCenter().lng();
request.open("GET", urli, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var timezone = request.responseXML.documentElement.getElementsByTagName("offset");
var zone = GXml.value(timezone[0])*1;
var answer = "EarthTools corrects: " + zone;
if(offset == zone){
answer = "EarthTools agrees";
}
document.getElementById('checkedZone').innerHTML = answer;
offset = zone;
hrThick = 4;
}}
request.send(null);
}
</script>
</body>
</html>
I am new to Javascript and I'm trying to build a web page using Google maps that changes the date and time on the clock that's displayed on the page when ever you change time zones. Any help will be much appreciated.
Here is the code I have at the moment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="polytime.css" title="stylesheet"/>
<title>Clock</title>
<script
src="type="text/javascript"></script>
<script type="text/javascript">
<!--
function clock(){ // The current time.
var t = new Date();
var daynow = t.getDay();
var zone = t.getTimezoneOffset() * 60000;
var monthnow = t.getMonth();
var weekday = t.getDate();
var yearnow = t.getYear();
var hours = t.getHours();
var min = t.getMinutes();
var sec = t.getSeconds();
var status = "AM";
var tzone = new Array("13 hours ahead of","12 hours ahead of","11 hours ahead of","10 hours ahead of","9 hours ahead of","8 hours ahead of","7 hours ahead of","6 hours ahead of","5 hours ahead of","4 hours ahead of","3 hours ahead of","2 hours ahead of","1 hour ahead of","in","1 hour behind","2 hours behind","3 hours behind","4 hours behind","5 hours behind","6 hours behind","7 hours behind","8 hours behind","9 hours behind","10 hours behind","11 hours behind","12 hours behind");
var day = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday");
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
var monthdate = new Array("0th","1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th",
"11th","12th","13th","14th","15th","16th","17th","18th","19th","20th",
"21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th",
"31st");
zone /= 60;
zone += 13;
if (yearnow < 2000)
yearnow += 1900;
if (hours > 11)
status = "PM";
if (hours > 12)
hours -= 12;
if (hours == 0)
hours = 12;
if (min < 10)
min = "0" + min;
if (sec < 10)
sec = "0" + sec;
window.setTimeout ("clock()", 900);
document.clock.time.value ="It is: " + hours + ":" + min + ":" + sec + " " + status + " on " + day[daynow] + ", " + month[monthnow] + " " + monthdate[weekday] + ", " + yearnow + ". You are " + tzone[zone] + " GMT.";
}
//-->
</script>
<script type="text/javascript">
function go() {
lng = parseFloat(document.getElementById("maahan").value.split(",")[0]);
lat = parseFloat(document.getElementById("maahan").value.split(",")[1]);
scale = parseInt(document.getElementById("maahan").value.split(",")[2]);
map.setCenter(new GLatLng(lat,lng),scale);
//map.setCenter(new GLatLng(lat,lng),scale);
}
</script>
</head>
<body onLoad="clock()">
<div id="novel">
<form action="#" onsubmit="showAddress(this.haku.value);addCity(this.haku.value); return false">
<h5>Town,city or country required:</h5>
<input type="text" size="40" id="haku" name="haku" title="Type an address"/>
<input type="submit" id="hae" value=" >> " title="You can hit enter key as well"/>
</form>
<span id="calcZone" title="1 hour / 15 degrees"></span>
<span id="checkedZone" title = "The clock is set accordingly"></span>
</div>
<div id="clock">
<form name="clock">
<input type="text" name="time" size="100" style="text-align: center; border: 0; font-family: Times New Roman; font-size: 12.0pt;" readonly>
</form>
</div>
<div id="map"></div>
<script type="text/javascript">
//City selector
function addCity(city){
//var n = document.getElementById('hardPresets').options.length;
//document.getElementById('hardPresets').options[n] = new Option(city);
}
function removeCity(k){
document.getElementById('hardPresets').options[k] = null;
}
//Map
var Tsize = new GSize(156, 156);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.42661449707482, -0.087890625),4);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl(1));
map.setMapType(G_HYBRID_MAP);
map.addControl(new GOverviewMapControl());
new GKeyboardHandler(map);
GEvent.addListener(map,'moveend',function(){
});
///Geo
var geocoder = new GClientGeocoder();
function showAddress(address){
geocoder.getLatLng(address,function(point){
if(!point){
document.getElementById('haku').style.color = 'red';
}
else{
map.panTo(point);
document.getElementById('haku').style.color = 'black';
}})}
var offset = 0;
function drawDish(){
offset = Math.floor((clockPoint.lng()+7.5)/15);
map.addOverlay(polygon);
document.getElementById('calcZone').innerHTML = " "; + offset;
document.getElementById('checkedZone').innerHTML = " ";
}
//EarthTools
function eTools(){
var lati = map.getCenter().lat();
var longi = map.getCenter().lng();
request.open("GET", urli, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var timezone = request.responseXML.documentElement.getElementsByTagName("offset");
var zone = GXml.value(timezone[0])*1;
var answer = "EarthTools corrects: " + zone;
if(offset == zone){
answer = "EarthTools agrees";
}
document.getElementById('checkedZone').innerHTML = answer;
offset = zone;
hrThick = 4;
}}
request.send(null);
}
</script>
</body>
</html>
