I would like to have two clocks on my website: one with local time, other with GMT+1. Everything works when i use the codes separetly, but when together, only second one works. What have I done wrong?
<div id="clockbox2" style="height: 100%px; width: 100%; color:#fff"> <script type="text/javascript"> tday=new Array("воскресение","понедельник","вторник","среда","четверг","пятница","суббота"); tmonth=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"); function GetClock(){ var d=new Date(); var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(); if(nyear<1000) nyear+=1900; var nhour=d.getHours(),nmin=d.getMinutes(); if(nmin<=9) nmin="0"+nmin document.getElementById('clockbox').innerHTML="<br>"+nhour+":"+nmin+"<br>"+tday[nday]+", "+ndate+" "+tmonth[nmonth]+", "+nyear+" г."; } window.onload=function(){ GetClock(); setInterval(GetClock,1000); } </script> </div>
<div id="clockbox2" style="height: 100%px; width: 100%; color:#fff"> <script type="text/javascript"> tday=new Array("воскресение","понедельник","вторник","среда","четверг","пятница","суббота"); tmonth=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"); function GetClock2(){ var tzOffset = -5;//set this to the number of hours offset from UTC var d=new Date(); var dx=d.toGMTString(); dx=dx.substr(0,dx.length -3); d.setTime(Date.parse(dx)) d.setHours(d.getHours()+tzOffset); var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(); if(nyear<1000) nyear+=1900; var nhour=d.getHours(),nmin=d.getMinutes(); if(nmin<=9) nmin="0"+nmin document.getElementById('clockbox2').innerHTML="<br>"+nhour+":"+nmin+"<br>"+tday[nday]+", "+ndate+" "+tmonth[nmonth]+", "+nyear+" г."; } window.onload=function(){ GetClock2(); setInterval(GetClock2,1000); } </script> </div>
There are several issues with your code:
_div_
elements have the same id : id = clockbox2
(that is the main problem) height
indicates 100%px
, you need to choose one of the units getFullYear
instead of getYear
color=#fff
:) Regarding the main question, use this for the second time zone:
d2.setHours(d2.getHours() - 5);
As long that is the number of hours offset from UTC.
I leave you here a snippet with a correct formatting:
tday=new Array("воскресение","понедельник","вторник","среда","четверг","пятница","суббота"); tmonth=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"); function GetClock(){ var d1= new Date(); var d2= new Date(); d2.setHours(d2.getHours() - 5); var nday1=d1.getDay(); var nmonth1=d1.getMonth(); var ndate1=d1.getDate(); var nyear1=d1.getFullYear(); var nhour1=d1.getHours(); var nday2=d2.getDay(); var nmonth2=d2.getMonth(); var ndate2=d2.getDate(); var nyear2=d2.getFullYear(); var nhour2=d2.getHours(); var nmin=d1.getMinutes(); if(nmin<=9) nmin="0"+nmin; document.getElementById('clockbox1').innerHTML = "<br>"+nhour1+":"+nmin+"<br>"+tday[nday1]+", "+ndate1+" "+tmonth[nmonth1]+", "+nyear1+" г."; document.getElementById('clockbox2').innerHTML = "<br>"+nhour2+":"+nmin+"<br>"+tday[nday2]+", "+ndate2+" "+tmonth[nmonth2]+", "+nyear2+" г."; } window.onload=function(){ setInterval(GetClock,1000); }
<div id="clockbox1" style="height: 100px; width: 100%; color:#000"></div> <div id="clockbox2" style="height: 100px; width: 100%; color:#000"></div>
Hope it helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.