JavaScript - Time Based On A Timezone
I have a site where users enter there certain timezome (+1, +4, -8 etc) and i want to display a clock with the local time on their profile page so when people view there profile they can see currently what time it is for them.
I currently a have this. Code: function timeclock() { var t=setTimeout("startclock()",500); } function startclock() { var x = new Date(); var hour = x.getHours(); var min = x.getMinutes(); var sec = x.getSeconds(); if (hour<10){hour="0"+hour} if (min<10){min="0"+min} if (sec<10){sec="0"+sec} document.getElementById("clock").innerHTML=hour+":"+min+":"+sec; timeclock(); } Is it possible to alter the date dependent on the timezone? Maybe put startclock(timezone) andchange it to new Date(timezone);? Similar TutorialsHi guys! Very new to registering here, but have lurked the forums for quite a while, and love the help I see the members give to those in need! Well, it's time to call myself: one of those in need! I'm building a "clan" website, and as such, there's things like clan events, competitions, and clan vs clan battles. However, the problem we have is that when listing the time, some people get confused with time zones, and as such, forget we Australians are a day ahead. As such, the easiest way to resolve this would be to have a date and time on the home page which we can then "refer" to when speaking about particular times an event is going to take place. What I pretty much want is something to say in text: "2:30am, Friday the 30th of October 2010" The GMT is going to be set to that of the server, so I'd like it to be GMT-7, so that when people visit the official game's server and see the time, they can then refer it back to our own time zone. I understand that a javascript script for date and time is available quite publically that can add or take 7 hours from your local time and call that the "GMT-7", but not everyone is on GMT+0, and as such, it gives multiple people different timings. I also want the time to update instantly (without refreshing the page). If I could PLEASE get some help, that would be greatly appreciated. I recently designed the website to be Halloween-related, and as such, want to launch it VERY soon (gosh, only 1 day to Halloween! HAPPY HALLOWEEN!), this is the only thing holding me back at the moment... Thank you for any help, I do very much appreciate it. (oh, p.s: I'm VERY new to javascript, and understand VERY little of it, if you give me a script and say "you can change the GMT to -7, please clearly indicate where I can do this as I won't be able to find it myself).. Thank you, thank you, thank you! hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve I am looking to change a flash movie based on the time of day. Basicaly I need it to switch between a day/night version of the flash. I have this piece of code and want to know how to call the day.swf, night.swf in the flash object section where i have written 'WHAT DO I PUT HERE?' Any help with be greatly appreciated. Thanks. Code: <script type="text/javascript"> <!-- var DayOrNightMovie = "day.swf"; now = new Date(); hour = now.getHours(); if (hour > 6 && hour < 18) { DayOrNightMovie = "day.swf"; } else { DayOrNightMovie = "night.swf"; } var FlashObject = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="520" height="85" hspace="0" vspace="0" align="top">' FlashObject += '<param name="movie" value="WHAT DO I PUT HERE?"> <param name="quality" value="high"><param name="wmode" value="transparent">' FlashObject += '<embed src="WHAT DO I PUT HERE?" width="520" height="85" hspace="0" vspace="0" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>' document.write(FlashObject); // --> </script> Hello all. I have created a 2 frame site where I want the top frame (header) to redirect the other frame (main) to a different page depending on the date, time, and second. For example, on 12 FEB at 07:00:00, I would like the header frame to redirect the main frames page to EmmasBday.html; in which I would be alerted of my little sisters Birthday. This is for personal use and isn't going to be hosted online so I will just use JavaScript, it's basically a simple system to remind me of crucial events at certain times and dates so I don't forget them. The same events will apply every year, so there is no need to programme in specific years although having the option could prove useful. I am aware of other alternatives to achieve this, but would very much like to work with JavaScript; as I can expand it. As I state, this is for personal use and therefore won't be hosting it; I will use JavaScript throughout and cannot use anything else like PHP, Perl, etc. I am aware JavaScript takes the time & date from the computer hosting it (unlike PHP), which is fine. So, for example; at 14:30:00 I will be informed to get dinner; and at 15:00:45 I'll be informed to study. The knowledge you guys have presented so far is phenomenal, and I couldn't think of anybody better to ask for assistance. Anyway, I hope you can resolve my problem and I'm looking forward to a response! Thanks for your concern, you brain Gods you! AHa. Hi Guys, I am looking for a script to change text on a page based on the time of day. From 9am - 5pm weekdays I would like the page to display 'Open', and outside of that window to display 'Closed'. I am using HTML & PHP. Any help would be greatly appreciated. Thanks, Matt Hey. I'm currently looking for a countdown script, which is based on the server's time. I've only found scripts, that's based on the local computer's time, which means the output of the script changes, when the time on the computer is changed. And I want to make a public announcement which counts down to something - and should output the same at every person. I'm not that familiar with JavaScript, I know some jQuery - if anyone can supply any links or can help me with this, I'd appreciate it. Hello I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903 except I need it to be dependent on the hour and minute. Background: I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule. An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well. Let me know if you have additional questions. EDIT: 17-Mar-12 @ 12:37PM I would rather not use a bunch of if statements. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal I have a javascript controlling the display of a DIV that I did a while back that needs a bit more tweaking to add function to hide the DIV on specific holidays. As it is now, by default, the DIV is being hidden unless it is M-F between 8:00AM-6:00PM: Code: <script type="text/javascript"> onload=function(){ var rightNow = new Date(); var day = rightNow.getDay(); var hour = rightNow.getHours(); var minute = rightNow.getMinutes(); var formDisplay = 'none'; // unless we see otherwise var forwardDisplay = 'block'; // unless we see otherwise if(day==1 || day==2 || day==3 || day==4 || day==5) { // if chat is avalable on these days if((hour>=8) && (hour<=17)) // if chat is avalable between these times formDisplay = 'block', forwardDisplay = 'none'; } document.getElementById('ChatForm').style.display = formDisplay; document.getElementById('ChatForward').style.display = forwardDisplay; } </script> Im assuming that I would just add more else if statements, but not really sure the cleanest way to assign specific dates using this format. Any help is appreciated I'm trying to add a body class of 'day' if it's 6am-5pm and 'night' if it's 5pm-6am based on the user's local time. I tried the following but it didn't work. Any ideas? In the <head> Code: <script> function setTimesStyles() { var currentTime = new Date().getHours(); if(currentTime > 5 && currentTime < 17) { document.body.className = 'day'; } else { document.body.className = 'night'; } } </script> Code: <body onload="setTimeStyles();"> Also, is there a more elegant way to achieve what I need? Hi all, Running Firefox 3.6.16 under Linux (64 bit Ubuntu 10.10), I found that the Javascript Date object incorrectly returns the time zone as "EST" (Eastern Standard Time) (I am in New York, USA, GMT-5/GMT-4). It is, however, returning the proper time OFFSET (i.e. GMT-4). Running Firefox 3.6.16 under Windows XP, the Date object correctly returns "EDT" (Eastern Daylight Time) as well as the correct GMT-4. Does Javascript in the browser get it's time info from the OS? Or more specifically, is this error a bug in FIREFOX, or in LINUX? Thanks...... -- Roger The webpage doesn't display the proper times when I load it up. The GMT variable deals with the Greenwich timezone, which that time is used with offset variables in order to get the right times from each respective time zone in the branch offices. So far it seems only houston and new york display the right times or close to it all the other ones are way off. Please help me find the right formulas thank you. <?xml version="1.0" encoding="UTF-8" ?> <!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"> <head> <!-- New Perspectives on JavaScript, 2nd Edition Tutorial 2 Case Problem 3 Jackson Electronics World Clock Author: Andy Duren Date: Filename: world.htm Supporting files: je.css, logo.mpg, map.jpg, zones.js --> <title>Jackson Electronics World Clock</title> <link href="je.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="zones.js"></script> <script type = "text/javascript"> function worldClock() { var today = new Date(); var offSet = today.getTimezoneOffset() * 60 * 1000; var GMT = addTime(today, offSet); var houstonoff = -360 * (60 * 1000); var time1 = addTime(GMT, houstonoff); //houston office time var washoff = -480 * (60 * 1000); var time2 = addTime(GMT, washoff); //washington office time var nyoff = -300 * (60 * 1000); var time3 = addTime(GMT, nyoff); //new york office time var englandoff = 0 * (60 * 1000); var time4 = addTime(GMT, englandoff); //london office time var japanoff = 540 * (60 * 1000); var time5 = addTime(GMT, japanoff); //tokyo office time var aussieoff = 660 * (60 * 1000); var time6 = addTime(GMT, aussieoff); //sydney office time document.zones.place1.value = showTime(time1); document.zones.place2.value = showTime(time2); document.zones.place3.value = showTime(time3); document.zones.place4.value = showTime(time4); document.zones.place5.value = showTime(time5); document.zones.place6.value = showTime(time6); } </script> </head> <body onload="setInterval('worldClock()', 1000)"> <form id="zones" name="zones" action=""> <div id="headbar"> <img src="logo.jpg" alt="Jackson Electronics" /> <h2>Corporate Headquarters World Clock</h2> </div> <div id="timemap"> <input id="place1" name="place1" size="7" /> <input id="place2" name="place2" size="7" /> <input id="place3" name="place3" size="7" /> <input id="place4" name="place4" size="7" /> <input id="place5" name="place5" size="7" /> <input id="place6" name="place6" size="7" /> <img src="map.jpg" alt="World Map" id="map" /> <table> <tr> <th id="name1">Houston</th> <th id="name2">London</th> <th id="name3">New York</th> <th id="name4">Seattle</th> <th id="name5">Sydney</th> <th id="name6">Tokyo</th> </tr> </table> <table> <tr> <td id="address3"> <p><b>Jackson Electronics USA</b><br /> 10010 Park Street<br /> New York, NY 10001<br /> <b>Phone: </b>(212) 555-1209<br /> <b>Fax: </b>(212) 555-4001 </p> </td> <td id="address4"> <p><b>Jackson Electronics Ltd.</b><br /> 2349 Mitchell Street<br /> Seattle, WA 65091<br /> <b>Phone: </b>(381) 555-5499<br /> <b>Fax: </b>(381) 555-3181 </p> </td> <td id="address1"> <p><b>Jackson Electronics Latin America</b><br /> 5150 Shasta Lane<br /> Houston, TX 32821<br /> <b>Phone: </b>(817) 555-8190<br /> <b>Fax: </b>(817) 555-2881 </p> </td> </tr> <tr> <td id="address2"> <p><b>Jackson Electronics Europe</b><br /> 18 Northland Avenue<br /> London, England WC2N 5EA<br /> <b>Phone: </b>(+44) 0 870 555 7081<br /> <b>Fax: </b>(+44) 0 870 555 1788 </p> </td> <td id="address5"> <p><b>Jackson Electronics Pacifica</b><br /> 171-105 Thomas Street<br /> Sydney NSW 2000, Australia<br /> <b>Phone: </b>(+61) 2 5555 8993<br /> <b>Fax: </b>(+61) 2 5555 7171 </p> </td> <td id="address6"> <p><b>Jackson Electronics Asia</b><br /> 1-2-99 Sumiyoshi<br /> Hakata-Ku<br /> Tokyo 140-8781 Japan<br /> <b>Phone: </b>(+81) 3 5551 7817<br /> <b>Fax: </b>(+81) 3 5551 2398 </p> </td> </tr> </table> </div> </form> </body> </html> Hi there, I'm new here in this forum and I've registered to ask a question about JavaScript or Jquery. I don't know which to use. I have my code php like that: <?php //Get the data from system and return in EU format function ShowDate() { $Date = date("d"."/"."m"."/"."Y"); return $Date; } //Get the time from system function ShowTime() { $Time = date("H".":"."i"); return $Time; } ?> Now I have two input box <html> <head> </head> <body> Type the date:<input name="txtdate" type="text" class="input" id="txtdate" title="e.g dd/mm/yyyy" value="<?php echo ShowDate(); ?>" size="9" maxlength="10"> <br> Type the time:<input name="txttime" type="text" id="txttime" value="<?php echo ShowTime(); ?>" size="5" maxlength="5"> <br> London: Friday May 21 2010 05:12:00 <br> New York: Friday May 21 2010 00:12:00<br> Hong Kong: Friday May 21 2010 12:12:00<br> Tokyo: Friday May 21 2010 13:12:00<br> </body> </html> So.... the important is the user can interactive with the date. If I change the date or time all this values will be change as well. Someone knows how can I do this? The field txtdate I will get from a calendar plugin (javascript) that I already put in my code. Thank you for your help. Andrei Andrade I found a little script online, and it seems to work pretty good. But my question is, if someone lives in another time zone, will it display differently for them or will they see what I see? I'm not sure if this is grabbing the timezone from the server or from the users pc. Could anyone help? Code: <script type="text/javascript"> var before="left until your track needs to be in." var current="Deadline is up." var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function countdown(yr,m,d){ theyear=yr;themonth=m;theday=d var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todayh=today.getHours() var todaymin=today.getMinutes() var todaysec=today.getSeconds() var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec futurestring=montharray[m-1]+" "+d+", "+yr dd=Date.parse(futurestring)-Date.parse(todaystring) dday=Math.floor(dd/(60*60*1000*24)*1) dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) if(dday==0&&dhour==0&&dmin==0&&dsec==1){ document.forms.count.count2.value=current return } else document.forms.count.count2.value=+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "+before setTimeout("countdown(theyear,themonth,theday)",1000) } //enter the count down date using the format year/month/day countdown(2010,04,23) </script> Ok Codies .... I am still new to javascript and trying to learn on my own to incress my productivity with my job so this is what I need .... I have to call customers back in a two hour window but that two hour window has to be entered on mountain time ... than I am in central time .. than what ever time zone my client is in. So what I am trying to do is ... I hit a drop down and select the Time zone ... than that pulls the two hour windows in the next drop down will give me the resulting 2 hour window for the Moutain time. I now its a simple convertion but when your dealing with 50 clients a day and trying not to over book each two hour slot ... well i start making mistakes. Any advice on a way I could build this ... I have tryed to nest an if statement to a drop down in html and it blew up on me. hiya guys im just trying to get some javascript working that will display on one html page multiple ticking digital clocks representing the accurate time of a host of differents countrys. i currently have managed to get a ticking clock on the page using +++++++++++++++++++++++++ var thetime=new Date(); var nhours=thetime.getHours(); var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); ++++++++++++++++++++++++++++++++ i now need to get other clocks on same page but with the live ticking time from other countrys. i tried for hours searching sites but could not find a solution i understood. i did however add simply add ++++++++++++++++++++ var nhours=thetime.getHours() +7; +++++++++++++++++++ the plus 7 i added was intended to add 7 hours to the clock then i could use this method for all the clocks and it did work it did change the time but there was a problem hong kong is about 8 hours ahead of the uk when its 8pm here its 2am there and if i use this method and i add 6 hours to the getHours variable it then makes the time 26hours rather than 3am here is my code i hope you can be of some help ++++++++++++++++++++++++++++++++++++++++++++++ <html> <HEAD> <TITLE>JavaScript Clock</TITLE> <SCRIPT language="JavaScript"> <!-- function ukclock() { var thetime=new Date(); //var mins=new Date(); //var secn=new Date(); var nhours=thetime.getHours(); //the line below same as above except the +num can be used to add hours to the clock //var nhours=thetime.getHours() +6; var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); var AorP=" "; if (nhours>=12) AorP="P.M."; else AorP="A.M."; if (nhours>=13) nhours-=12; if (nhours==0) nhours=12; if (nsecn<10) nsecn="0"+nsecn; if (nmins<10) nmins="0"+nmins; document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP; setTimeout('ukclock()',1000); } //--> </SCRIPT> </head> <BODY onload="ukclock()"> <FORM name="clockform"> Current Time in UK: <INPUT TYPE="text" name="clockspot" size="15"> <br /> </FORM> </body> ++++++++++++++++++++++++++++++++++++++++++++++ I have a twitter feed on my site and although am generally happy with it, the time-stamp for each tweet is several hours ahead of my time zone. I've looked through the js files to see if there is anything that allows me to set the timezone but cannot find anything. Anyone know how to reset the time to pacific standard time? Here's the URL http://www.kitchenprose.com/gmtest/index.html Can't for the life of me see anything in the code that controls time zone (would like Pacific Standard time, US) Code: $(document).ready(function() { $.Juitter.start({ searchType:"fromUser", // needed, you can use "searchWord", "fromUser", "toUser" searchObject:"gillesmarini", // needed, you can insert a username here or a word to be searched for, if you wish multiple search, separate the words by comma. // The values below will overwrite the ones on the Juitter default configuration. // They are optional here. // I'm changing here as a example only lang:"en", // restricts the search by the given language live:"live-125", // the number after "live-" indicates the time in seconds to wait before request the Twitter API for updates. placeHolder:"juitterContainer", // Set a place holder DIV which will receive the list of tweets example <div id="juitterContainer"></div> loadMSG: "Loading messages...", // Loading message, if you want to show an image, fill it with "image/gif" and go to the next variable to set which image you want to use on imgName: "loader.gif", // Loading image, to enable it, go to the loadMSG var above and change it to "image/gif" total: 4, // number of tweets to be show - max 100 readMo "Read it on Twitter", // read more message to be show after the tweet content nameUser:"text", // insert "image" to show avatar of "text" to show the name of the user that sent the tweet openExternalLinks:"newWindow", // here you can choose how to open link to external websites, "newWindow" or "sameWindow" filter:"sex->*BAD word*,porn->*BAD word*,****->*BAD word*,****->*BAD word*" // insert the words you want to hide from the tweets followed by what you want to show instead example: "sex->censured" or "porn->BLOCKED WORD" you can define as many as you want, if you don't want to replace the word, simply remove it, just add the words you want separated like this "porn,sex,****"... Be aware that the tweets will still be showed, only the bad words will be removed }); $("#aRodrigo").click(function(){ $(".jLinks").removeClass("on"); $(this).addClass("on"); $.Juitter.start({ searchType:"fromUser", searchObject:"mrjuitter,rodrigofante", live:"live-120" // it will be updated every 120 seconds/2 minutes }); }); $("#aIphone").click(function(){ $(".jLinks").removeClass("on"); $(this).addClass("on"); $.Juitter.start({ searchType:"searchWord", searchObject:"iPhone,apple,ipod", live:"live-20" // it will be update every 20 seconds }); }); $("#aJuitter").click(function(){ $(".jLinks").removeClass("on"); $(this).addClass("on"); $.Juitter.start({ searchType:"searchWord", searchObject:"Juitter", live:"live-180" // it will be updated every 180 seconds/3 minutes }); }); $("#juitterSearch").submit(function(){ $.Juitter.start({ searchType:"searchWord", searchObject:$(".juitterSearch").val(), live:"live-20", // it will be updated every 180 seconds/3 minutes filter:"sex->*BAD word*,porn->*BAD word*,****->*BAD word*,****->*BAD word*" }); return false; }); $(".juitterSearch").blur(function(){ if($(this).val()=="") $(this).val("Type a word and press enter"); }); $(".juitterSearch").click(function(){ if($(this).val()=="Type a word and press enter") $(this).val(""); }); }); Many thanks! I need to have a script which suggests a list of towns, their longitude/lattitudes and timezones based on the user filling in a field. I've seen scripts like this on many different web pages, so you type in "London" and then it suggests "London, England", "London Ontario" etc. and you can select the correct one. Is there a widely used method of generating a script like this? I'm thinking Google API might be used for this type of thing but I'm not sure. Hi Code: var err_str=""; function validate_grid(value,id,ind) { $("#result").html(" ").show(); if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } alert(err-str); here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str=""; function validate_grid(value,id,ind) { $("#result").html(" ").show(); if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str=""; function validate_grid(value,id,ind) { if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } |