Creating a JavaScript Clock

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

20-Feb-07 00:00
This is a forum topic for discussing the article "Creating a JavaScript Clock":

http://www.elated.com/articles/creating-a-javascript-clock/

Use JavaScript's Date object and Window.setInterval method to make a simple real-time clock that you can place on any Web page. Along the way, you take a look at how to access text nodes in the DOM, and how to set an onLoad event handler.
01-Jul-10 06:10
How would I make it so i could have it display it like this:

Mon, July, 1st, 2010 , 07:10 am?

Thanks,
Steve C
01-Jul-10 07:13
Never Mind i got it... Heres the code that i used:



<script type="text/javascript">
<!--

function updateClock ( )
{
var currentTime = new Date ( );

var currentDay = currentTime.getDay ( );

//Convert the day component to day abbreviation
currentDay = ( currentDay == 0 ) ? "Sun" : currentDay;
currentDay = ( currentDay == 1 ) ? "Mon" : currentDay;
currentDay = ( currentDay == 2 ) ? "Tue" : currentDay;
currentDay = ( currentDay == 3 ) ? "Wed" : currentDay;
currentDay = ( currentDay == 4 ) ? "Thu" : currentDay;
currentDay = ( currentDay == 5 ) ? "Fri" : currentDay;
currentDay = ( currentDay == 6 ) ? "Sat" : currentDay;

var currentMonth = currentTime.getMonth( );

//Convert the month component to text month
currentMonth = ( currentMonth == 0 ) ? "January" : currentMonth;
currentMonth = ( currentMonth == 1 ) ? "February" : currentMonth;
currentMonth = ( currentMonth == 2 ) ? "March" : currentMonth;
currentMonth = ( currentMonth == 3 ) ? "April" : currentMonth;
currentMonth = ( currentMonth == 4 ) ? "May" : currentMonth;
currentMonth = ( currentMonth == 5 ) ? "June" : currentMonth;
currentMonth = ( currentMonth == 6 ) ? "July" : currentMonth;
currentMonth = ( currentMonth == 7 ) ? "August" : currentMonth;
currentMonth = ( currentMonth == 8 ) ? "September" : currentMonth;
currentMonth = ( currentMonth == 9 ) ? "October" : currentMonth;
currentMonth = ( currentMonth == 10) ? "November" : currentMonth;
currentMonth = ( currentMonth == 11) ? "December" : currentMonth;

var currentDate = currentTime.getDate( );

// Add suffix to the date
currentDate = ( currentDate == 1 || currentDate == 21 || currentDate == 31 ) ? currentDate + "st" : currentDate;
currentDate = ( currentDate == 2 || currentDate == 22 ) ? currentDate + "nd" : currentDate;
currentDate = ( currentDate == 3 ) || currentDate == 23 ? currentDate + "rd" : currentDate;
currentDate = ( currentDate > 3 || currentDate < 21 || currentDate > 23 || currentDate < 31 ) ? currentDate + "th" : currentDate;


var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = "Today is : " + currentDay + " " + currentMonth + " " + currentDate + " " + currentHours + ":" + currentMinutes + " " + timeOfDay;

// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>
05-Jul-10 04:04
@arrow816: Looks good - thanks for posting your solution.

Cheers,
Matt

--
Matt Doyle, Elated
05-Jul-10 09:19
Yep, No Problem, always try and help out where I can.

Thanks for the great clock,
Steve C
06-Jan-11 13:02
Matt,

Thank you so much for this article, it really was exactly what I was looking for. For someone who has a tiny background in programming and none in java, the explanation was easy enough to understand how this script works, and did not just give me a reward with no lesson, so thanks.

Offhand, could you maybe suggest a source to start picking up java? I figure most guides would be good, but was just curious if you knew of a better-than-most starting point, or something along those lines. I have been occupied with other studies, and would like to start learning some more languages.

Thanks ahead,

Doob
06-Jan-11 23:44
Hi Doob,

I'm glad you found the article helpful.

Please note that Java and JavaScript are two different (although somewhat related) languages that do different things - don't confuse the two!

Assuming you mean JavaScript, then you can't go wrong with JavaScript: The Definitive Guide:

http://www.amazon.com/exec/obidos/ASIN/0596000480/

Cheers,
Matt

--
Matt Doyle, Elated
21-Mar-11 05:51
Thank you so much for this code!
May I ask what do I need to change to make the time be set? I need to set it to the Server time instead of the client time.

Please help.
21-Mar-11 14:54
javascript runs on the client not the server and once the page is delivered to the client no more server communication occurs.

You can seed the clock by passing a date value to the page from the server and using that in place of the new Date



var currentTime = [serverValue goes here];


--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
29-Mar-11 13:51
How do I alter this clock code to make the clock countdown to a specific date, such as Christmas for example?
30-Mar-11 05:30
@SU45: Create a new Date object for your target date and the current date. I think you could then use the UTC() method to convert both dates to UTC format in milliseconds, then subtract one from the other. Then divide the resulting value by the number of milliseconds in a day, hour, etc to get the countdown values, which you can then display in the page.

More on working with dates:

http://www.elated.com/articles/working-with-dates/

Cheers,
Matt

--
Matt Doyle, Elated
30-Mar-11 15:29
Almost done, I just need the Days, Hours, Mins, Secs all on new lines within the countdown box. How do I insert a line break for each? I am not overly familiar with coding because I usually use software to build web-pages, hopefully the solution is simple?

Here's the code:



<style type="text/css">
#countbox { font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size: 85px; color: yellow; background-color: black; border: 12px solid grey; padding: 18px; padding-left: 48px; padding-right: 48px;}
</style>

<script type="text/javascript">



dateFuture = new Date(2045,0,0,0,0,0);


function GetCount(){

dateNow = new Date(); //grab current date
amount = dateFuture.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

// time is already past
if(amount < 0){
document.getElementById('countbox').innerHTML="The Singularity <br>is happening...<br> NOW! &nbsp &#9829 &#9829 &#9829 &#9829";
}
// date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
out += secs +" seconds";
document.getElementById('countbox').innerHTML=out;

setTimeout("GetCount()", 1000);
}
}

window.onload=GetCount;//call when everything has loaded

</script>
<div id="countbox" div style="margin-top: 80px; margin-left: 100px;
margin-right: 100px;">



</div>



</body>
</html>



It's OK, I've sorted it out now. I found the place where the breaks go.

[Edited by SU45 on 30-Mar-11 15:36]
30-Mar-11 19:03
Almost done now.

Just a couple of things I'd like to correct.

Regarding "seconds" when there is only "1 second" remaining, my code currently displays "seconds" instead the correct "second" for "1"; how do I change this?:


if(days != 0){out += days +"&nbsp day"+((days!=1)?"s":"")+",<br>";}
if(days != 0 || hours != 0){out += hours +"&nbsp hour"+((hours!=1)?"s":"")+",<br>";}
if(days != 0 || hours != 0 || mins != 0){out += mins +"&nbsp minute"+((mins!=1)?"s":"")+",<br>";}
out += secs +"&nbsp seconds.";


Also when the hours are at midnight (if days are remaining) it will display "0 hours" whereas when hours (and mins) are at zero I would prefer not to display the zero hours or mins, so that instead of "0 hours" (or "O minutes") the field is completely nonexistent. How can I do this?

[Edited by SU45 on 31-Mar-11 01:17]
31-Mar-11 04:05
@SU45: Sounds like you're doing great!

You already have the code in there to display "minute" and "hour" when there's only 1 minute or hour. So just copy that for the seconds too:


second"+((secs!=1)?"s":"")+" ...


BTW you need "&nbsp;" not "&nbsp".

For your second question, again it looks like you already have that in your code. Basically you want something like:


if ( days != 0 ) out += days ...


--
Matt Doyle, Elated
31-Mar-11 05:07
Yes, in theory it should be an easy task to duplicate the code already used (regarding hours to hour and minutes to minute: for seconds to second) but whatever I try my additions cause the whole thing to vanish. I can't seem to figure out what I am doing wrong. I'm probably making a silly mistake because I am a JavaScript novice, but I have no idea what the mistake is.



Likewise I cannot seem to 'out' the hours when the hours are zero and days are remaining. If there are no days remaining then the hours will be 'out' fine, but I'd also like to do this for zero hours when days are remaining.

Maybe I need to use something like this, but this doesn't work:


if(days != 1 || hours != 0){out = hours:"")+",<br>";}


I did however manage to add the semicolon for nbsp although it seems to work just the same with or without the semicolon, is the semi colon essential?

This is where I am at so far: http://singularity-2045.org/countdown.html
31-Mar-11 05:24
@SU45: Have you checked your browser's error console for JavaScript errors?

I'll take a closer look tomorrow if I have time...

--
Matt Doyle, Elated
31-Mar-11 17:18
Hi Matt,

Nicely written post. Very helpful!

This is a question for Matt, or others...

Do you think that Matt's code wold be a good starting point to accomplish this:

I’d like to create a clock or odometer style display that would allow me to freely set the variable that governs the rate of counting. The display then changes as fast as necessary to always display the year-to-date number at the rate I have specified. Sort of a population counter or a website hit counter, but with rates that I'd control.

I’d use it to display on my website the incidence of various illnesses each year. Based on the known rate of incidence of a particular illness each year (this is the variable that I would input--for example, “6,285 people in the specified population will contract XXX disease in 2011”), and the portion of the year that has passed until the present date and time, the display would show the year-to-date number of people who had contracted that disease-- 4,286, or 792, or 177, or whatever.

Each time a user opens or refreshes the page, the display would update to the correct count relative to the current date and time. Or, if the code would allow it, the display would continuously update while the user remains on that page.

Suggestions?
04-Apr-11 02:30
@SU45: yes the semicolon is essential.

I'm struggling to understand exactly what you want to do with the days/hours thing. An example might help. Can you post an example in a new topic please, and we can take it from there?

http://www.elated.com/forums/authoring-and-programming/topic/new/

@Diggadee: If I understand you correctly, then you'd want to multiply your yearly figure by the proportion of the year that has so far elapsed (based on the current date retrieved from the Date() object), then display the figure in the page. You'd wrap this in a function, then call it periodically using setInterval():

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

If you'd like further help on this, please start a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

--
Matt Doyle, Elated
22-Apr-11 16:37
Thank you for this article, it help me. The way that you explain each steps helps. Thanks again
25-Apr-11 04:43
@geneteninty: Thanks for your comment. I'm glad you found the article helpful!

--
Matt Doyle, Elated
02-May-11 18:57
Hi,

I realize this article is a bit old but, it's the best one I've found for what I was trying to do. In the article you mentioned

"You might like to try putting the various time components in separate span containers, so that you can style them individually."

I'm extremely new at this and have actually (surprisingly) gotten everything else to work except, I would love to be able to display the hours, minutes and seconds under separate div or span tags in order to modify them individually using css. Any help with this would be extremely helpful. Keep in mind I'm a complete noob and would love as step by step instructions as you possibly have patience for. I've pasted the code below.

I apologize in advance if it's very long and dirty...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>

#Layer {
width: 322px;
height: 482px;
position: absolute;
top: -1px;
right: 0px;
down: 0px;
left: -1px;
}

.stretch {
width:100%;
height:100%;
}

#line {
-webkit-mask-box-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(0.6773,white));
-webkit-box-shadow:0 0 5px #000;
background:rgba(255,255,255,1);
position:absolute;
left:72px;
height:425px;
width:1px;
top: 6px;
opacity: .7;

</style>

<div id="Layer"><img src="LockBackground.png" width="320" height="480"></div>

<div id="line"></div>

<style type="text/css">

@font-face {
font-family:HelveticaNeueUltraLight;
src:url(helveticaneue-ultralight-webfont.svg#webfontUsKRqVpD) format(svg);
font-weight:400;
font-style:normal;
}

#clock{
position:absolute;
width: 220px;
height: 60px;
text-align: right;
vertical-align:top;
z-index: +4;
top: 351px;
right: 327px;
font-family:HelveticaNeueUltraLight;
color:white;
font-size: 46px;
opacity: .5;
}

#hours {
position:absolute;
top:30px;
left:-34px;
height: 60px;
width:100px;
text-align:right;
font-family:HelveticaNeueUltraLight;
font-size: 46px;
color: white;
opacity: .5;

}

#minutes {
position:absolute;
left:80px;
top:30px;
height: 60px;
width:150px;
text-align:left;
font-family:HelveticaNeueUltraLight;
font-size: 46px;
color: white;
opacity: .5;
}

.weekday {
position: absolute;
top: 267px;
left: 80px;
width: 150px;
height: 60px;
text-align:left;
font-family:HelveticaNeueUltraLight;
font-size: 46px;
color: white;
opacity: .5;
}

.month{
position: absolute;
width: 150px;
height: 60px;
top: 309px;
left: 80px;
text-align:left;
font-family:HelveticaNeueUltraLight;
font-size: 46px;
color: white;
opacity: .5;
}

.date{
position: absolute;
top: 309px;
width: 100px;
height: 60px;
left: -34px;
text-align:right;
font-family:HelveticaNeueUltraLight;
font-size: 46px;
color: white;
opacity: .5;
}

.icon{
position: absolute;
z-index:10;
text-align: right;
left: 25px;
top: 228px;
opacity: .5;
}

#temp{
position:absolute;
z-index:7;
width: 150px;
height: 60px;
color:white;
top: 179px;
left: 80px;
font-size: 46px;
font-family:HelveticaNeueUltraLight;
text-align:left;
opacity: .5;
}

</style>

<script language="javascript" type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()

var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
if (minutes < 10)
minutes = "0" + minutes

</script>

<script language="Javascript" type="text/javascript">
var today = new Date();
var monthnum = today.getMonth();
var monthname=new Array("JAN","FEB","MAR","APR","MAY",
"JUN","JUL","AUG","SEPT","OCT","NOV","DEC");
var day=today.getDate();
</script>



<script language="Javascript">

var this_weekday_name_array = new Array("SUN","MON","TUES","WED","THURS","FRI","SAT") //predefine weekday names

var this_date_timestamp=new Date() //get current day-time stamp

var this_weekday = this_date_timestamp.getDay() //extract weekday
var this_date = this_date_timestamp.getDate() //extract day of month


var this_weekday_string = this_weekday_name_array[this_weekday]
var this_day_string = this_date
//-->

</script>


<script type="text/javascript">

var iconExtWall = '.png'
var iconExtLock = '.png'
var locale = '33138'
var iconSetWall = 'stardock'
var iconSetLock = 'stardock'
var enableWallpaper = true
var isCelsius = false
var useRealFeel = false
var enableLockScreen = true
var source = 'appleAccuweatherStolen'
var stylesheetWall = 'mini'
var stylesheetLock = 'Under_StatusBar'
var updateInterval = 15

var postal;
var demoMode = false;
var enabled;

if (location.href.indexOf("Wallpaper") > 0){
stylesheet = stylesheetLock;
iconSet = iconSetLock;
iconExt = iconExtLock;
enabled = enableLockScreen;
}else{
stylesheet = stylesheetWall;
iconSet = iconSetWall;
iconExt = iconExtWall;
enabled = enableWallpaper;
}

if(enabled == true){
if(iconSet == null || iconSet == 'null' || iconSet == ""){
var iconSet = stylesheet;
}

var headID = document.getElementsByTagName("head")[0];
var styleNode = document.createElement('link');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
styleNode.href = 'Stylesheets/'+stylesheet+'.css';
headID.appendChild(styleNode);

var scriptNode = document.createElement('script');
scriptNode.type = 'text/javascript';
scriptNode.src = 'Sources/'+source+'.js';
headID.appendChild(scriptNode);
}

function onLoad(){
if (enabled == true){
if (demoMode == true){
document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+"cloudy1"+iconExt;
document.getElementById("temp").innerText="100�";
document.getElementById("forecast").innerText="Sun";
}else{
document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+"dunno"+iconExt;
validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)
}
}else{
document.getElementsByTagName("body")[0].innerText='';
}
}

function convertTemp(num)
{
if (isCelsius == true)
return Math.round ((num - 32) * 5 / 9);
else
return num;
}

function setPostal(obj){

if (obj.error == false){
if(obj.cities.length > 0){
postal = escape(obj.cities[0].zip).replace(/^%u/g, "%")
document.getElementById("WeatherContainer").className = "";
weatherRefresherTemp();
}else{
document.getElementById("WeatherContainer").className = "errorLocaleNotFound";
}
}else{
document.getElementById("WeatherContainer").className = "errorLocaleValidate";
setTimeout('validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)', Math.round(1000*60*5));
}
}

function dealWithWeather(obj){
var translatedesc="description";
if (obj.error == false){

document.getElementById("desc").innerText=obj.description.toLowerCase();


if(useRealFeel == true){
tempValue = convertTemp(obj.realFeel);
}else{
tempValue = convertTemp(obj.temp)
}
document.getElementById("temp").innerText=tempValue+"º";
document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt;

/*ProductRed*/
lastResults = new Array;
lastResults[0] = {daycode:obj.daycode, icon:obj.icon, hi:obj.hi, lo:obj.lo, now:obj.temp};
var c = obj.forecast.length;
var titi = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var toto =new Date();
var tutu = toto.getDay();
var tata;
if (c > 6) c = 6; // just to be safe
for (var i=0; i<c; ++i)
{
var forecast = obj.forecast[i];

tata = tutu + i;
if(tata > 6) {tata = tata - 7;}
document.getElementById('day'+i).innerText = titi[tata];
document.getElementById('hi'+i).innerHTML = convertTemp(forecast.hi)+'&#176 ';
document.getElementById('low'+i).innerHTML= convertTemp(forecast.lo)+'&#176 ';
document.getElementById('wIcon'+i).src="IconSets/"+iconSet+"/"+MiniIcons[forecast.icon]+iconExt;

lastResults[i+1] = {daycode:forecast.daycode, icon:forecast.icon, hi:forecast.hi, lo:forecast.lo};
}
/*ProductRed*/

document.getElementById("WeatherContainer").className = "";



}else{
//Could be down to any number of things, which is unhelpful...
document.getElementById("WeatherContainer").className = "errorWeatherDataFetch";
}

var this_date_timestamp = new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()

if (this_year < 1000)
this_year+= 1900;
if (this_year==101)
this_year=2001;

}

function weatherRefresherTemp(){ //I'm a bastard ugly hack. Hate me.
fetchWeatherData(dealWithWeather,postal);
setTimeout(weatherRefresherTemp, 60*1000*updateInterval);
}




// Modified from weatherParser.js from Leopard. Apologies to all offended.
// I'm hoping that no-one objects since it's Apple hardware and so forth.

/*
Copyright _ 2005, Apple Computer, Inc. All rights reserved.
NOTE: Use of this source code is subject to the terms of the Software
License Agreement for Mac OS X, which accompanies the code. Your use
of this source code signifies your agreement to such license terms and
conditions. Except as expressly granted in the Software License Agreement
for Mac OS X, no other copyright, patent, or other intellectual property
license or right is granted, either expressly or by implication, by Apple.
*/

var MiniIcons = //Fix Up for weatherParser.js but also enables standardisation of sorts
[
"sunny", // 1 Sunny
"cloudy1", // 2 Mostly Sunny
"cloudy2", // 3 Partly Sunny
"cloudy3", // 4 Intermittent Clouds
"cloudy4", // 5 Hazy Sunshione
"cloudy5", // 6 Mostly Cloudy
"cloudy5", // 7 Cloudy (am/pm)
"overcast", // 8 Dreary (am/pm)
"dunno", // 9 retired
"dunno", // 10 retired
"fog", // 11 fog (am/pm)
"shower1", // 12 showers (am/pm)
"shower3", // 13 Mostly Cloudy with Showers
"shower2", // 14 Partly Sunny with Showers
"tstorm3", // 15 Thunderstorms (am/pm)
"tstorm2", // 16 Mostly Cloudy with Thunder Showers
"tstorm1", // 17 Partly Sunnty with Thunder Showers
"light_rain", // 18 Rain (am/pm)
"cloudy5", // 19 Flurries (am/pm)
"cloudy4", // 20 Mostly Cloudy with Flurries
"cloudy2", // 21 Partly Sunny with Flurries
"snow5", // 22 Snow (am/pm)
"snow3", // 23 Mostly Cloudy with Snow
"hail", // 24 Ice (am/pm)
"sleet", // 25 Sleet (am/pm)
"hail", // 26 Freezing Rain (am/pm)
"dunno", // 27 retired
"dunno", // 28 retired
"sleet", // 29 Rain and Snow Mixed (am/pm)
"sunny", // 30 Hot (am/pm)
"sunny_night", // 31 Cold (am/pm)
"mist", // 32 Windy (am/pm)
// Night only Icons;
"sunny_night", // 33 Clear
"cloudy1_night", // 34 Mostly Clear
"cloudy2_night", // 35 Partly Cloudy
"cloudy3_night", // 36 Intermittent Clouds
"cloudy4_night", // 37 Hazy
"cloudy5", // 38 Mostly Cloudy
"shower2_night", // 39 Partly Cloudy with Showers
"shower3_night", // 40 Mostly Cloudy with Showers
"tstorm1_night", // 41 Partly Cloudy with Thunder Showers
"tstorm2_night", // 42 Mostly Cloudy with Thunder Showers
"cloudy4_night", // 43 Mostly Cloudy with Flurries
"cloudy4_night" // 44 Mostly Cloudy with Flurries
];

function getURLForSmallIcon (code)
{
var src = '';
if (code)
{
src = miniIconTable[code];

if (src === undefined)
src = '';
}

return src;
}

function findChild (element, nodeName)
{
var child;

for (child = element.firstChild; child != null; child = child.nextSibling)
{
if (child.nodeName == nodeName)
return child;
}

return null;
}


function trimWhiteSpace (string)
{
return string.replace(/^\s*/, '').replace(/\s*$/, '');
}

// returns an anonymous object like so
// object
// error: Boolean false for success
// errorString: failure string
// hi: Fahrenheit
// lo: Fahrenheit
// temp: Fahrenheit
// realFeel: Farenheit
// icon : accuweather icon code
// description: accuweather description
// city: City (first caps)
// time: time 24 hours(nn:nn)
// sunset: time 24 hours (nn:nn)
// sunrise: time 24 hours (nn:nn)

function fetchWeatherData (callback, zip)
{
//var url = 'http://apple.accuweather.com/adcbin/apple/Apple_Weather_Data.asp?zipcode=';
var url = 'http://wu.apple.com/adcbin/apple/Apple_Weather_Data.asp?zipcode=';

if (window.timerInterval != 300000)
window.timerInterval = 300000; // 5 minutes

var xml_request = new XMLHttpRequest();
xml_request.onload = function(e) {xml_loaded(e, xml_request, callback);}
xml_request.overrideMimeType("text/xml");
xml_request.open("GET", url+zip);
xml_request.setRequestHeader("Cache-Control", "no-cache");
xml_request.setRequestHeader("wx", "385");
xml_request.send(null);

return xml_request;
}

function constructError (string)
{
return {error:true, errorString:string};
}

// parses string of the form nn:nn
function parseTimeString(string)
{
var obj = null;
try {
var array = string.match (/\d{1,2}/g);

obj = {hour:parseInt(array[0], 10), minute:parseInt(array[1],10)};
}
catch (ex)
{
// ignore
}

return obj;
}

function parseDayCode (dayCode)
{
return trimWhiteSpace(dayCode).substr (0, 3).toUpperCase();
}

function xml_loaded (event, request, callback)
{
if (request.responseXML)
{
var obj = {error:false, errorString:null};
var adc_Database = findChild (request.responseXML, "adc_Database");
if (adc_Database == null) {callback(constructError("no <adc_Database>")); return;}

var CurrentConditions = findChild (adc_Database, "CurrentConditions");
if (CurrentConditions == null) {callback(constructError("no <CurrentConditions>")); return;}

var tag = findChild (CurrentConditions, "Time");
if (tag != null)
obj.time = parseTimeString (tag.firstChild.data);
else
obj.time = null;

tag = findChild (CurrentConditions, "City");
if (tag == null) {callback(constructError("no <City>")); return;}
obj.city = trimWhiteSpace(tag.firstChild.data.toString()).toLowerCase();

tag = findChild (CurrentConditions, "Temperature");
if (tag == null) {callback(constructError("no <Temperature>")); return;}
obj.temp = parseInt (tag.firstChild.data);

tag = findChild (CurrentConditions, "RealFeel");
if (tag == null) {callback(constructError("no <RealFeel>")); return;}
obj.realFeel = parseInt (tag.firstChild.data);

tag = findChild (CurrentConditions, "WeatherText");
if (tag == null)
obj.description = null;
else
obj.description = trimWhiteSpace(tag.firstChild.data);

tag = findChild (CurrentConditions, "WeatherIcon");
if (tag == null) {callback(constructError("no <WeatherIcon>")); return;}
obj.icon = parseInt (tag.firstChild.data, 10);
obj.icon -= 1; //Accuweather starts at 1

obj.sunset = null;
obj.sunrise = null;
var Planets = findChild (adc_Database, "Planets");
if (Planets != null)
{
tag = findChild (Planets, "Sun");
if (tag != null)
{
var rise = tag.getAttribute("rise");
var set = tag.getAttribute("set");

if (rise != null && set != null)
{
obj.sunset = parseTimeString (set);
obj.sunrise = parseTimeString(rise);
}
}
}

obj.forecast = new Array;
var Forecast = findChild (adc_Database, "Forecast");
if (Forecast == null) {callback(constructError("no <Forecast>")); return;}

// assume the days are in order, 1st entry is today
var child;
var j=0;
var firstTime = true;

for (child = Forecast.firstChild; child != null; child = child.nextSibling)
{
if (child.nodeName == 'day')
{
if (firstTime) // today
{
obj.hi = 0;
tag = findChild(child, 'High_Temperature');
if (tag != null)
obj.hi = parseInt (tag.firstChild.data);

obj.lo = 0;
tag = findChild(child, 'Low_Temperature');
if (tag != null)
obj.lo = parseInt (tag.firstChild.data);

firstTime = false;
}

var foreobj = {description:null, hi:0, lo:0, icon:-1};

tag = findChild(child, 'DayCode');
if (tag != null)
foreobj.daycode = trimWhiteSpace(tag.firstChild.data.toString()).substring(0,3);

tag = findChild(child, 'High_Temperature');
if (tag != null)
foreobj.hi = parseInt (tag.firstChild.data);

tag = findChild(child, 'Low_Temperature');
if (tag != null)
foreobj.lo = parseInt (tag.firstChild.data);

tag = findChild(child, 'WeatherIcon');
if (tag != null)
{
foreobj.icon = parseInt (tag.firstChild.data, 10);
foreobj.ouricon = MiniIcons[foreobj.icon-1];
}

obj.forecast[j++]=foreobj;
if (j == 7) break; // only look ahead 7 days
}
}

callback (obj);

}
else
{
callback ({error:true, errorString:"XML request failed. no responseXML"}); //Could be any number of things..
}
}

// returns an anonymous object like so
// object
// error: Boolean false for success
// errorString: failure string
// cities: array (alphabetical by name)
// object
// name: city name
// zip: postal code
// state: city state
// refine: boolean - true if the search is too generic
function validateWeatherLocation (location, callback)
{
//var url = 'http://apple.accuweather.com/adcbin/apple/Apple_find_city.asp?location=';
var url = 'http://wu.apple.com/adcbin/apple/Apple_find_city.asp?location=';

var xml_request = new XMLHttpRequest();
xml_request.onload = function(e) {xml_validateloaded(e, xml_request, callback);}
xml_request.overrideMimeType("text/xml");
xml_request.open("GET", url+location);
xml_request.setRequestHeader("Cache-Control", "no-cache");
xml_request.send(null);
}

function xml_validateloaded (event, request, callback)
{
if (request.responseXML)
{
var obj = {error:false, errorString:null, cities:new Array, refine:false};
var adc_Database = findChild (request.responseXML, "adc_Database");
if (adc_Database == null) {callback(constructError("no <adc_Database>")); return;}

var CityList = findChild (adc_Database, "CityList");
if (CityList == null) {callback(constructError("no <CityList>")); return;}

if (CityList.getAttribute('extra_cities') == '1')
obj.refine = true;

for (child = CityList.firstChild; child != null; child = child.nextSibling)
{
if (child.nodeName == "location")
{
var city = child.getAttribute("city");
var state = child.getAttribute("state");
var zip = child.getAttribute("postal");

if (city && state && zip)
{
obj.cities[obj.cities.length] = {name:city, state:state, zip:zip};
}
}
}

callback (obj);
}
else
{
callback ({error:true, errorString:"No Response"});
}
}

function createGoToURL (location)
{
return 'http://apple.accuweather.com/adcbin/apple/Apple_weather.asp?location=' + escape(location);
}

function updateClock ( )
{

var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );

var currentMinutes = currentTime.getMinutes ( );

var currentSeconds = currentTime.getSeconds ( );


// Pad the minutes and seconds with leading zeros, if required

//currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;

currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;


// Convert an hours component of "0" to "12"

currentHours = ( currentHours == 0 ) ? currentHours + 24 : currentHours;


// Convert the hours component to 12-hour format if needed

currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;


// Convert an hours component of "0" to "12"

currentHours = ( currentHours == 0 ) ? 12 : currentHours;


// Compose the string for display

var currentTimeString = currentHours + " " + currentMinutes + " " + suffix;

// Update the time display


document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}


</script>

</head>

<div id="WeatherContainer"> <div id="TextContainer"><p id="temp">&#176;</p> <p id="desc">...</p> </div>

<body onload="onLoad()" background-color="transparent"><base href="Private/"/>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>





<!-- Time -->
<div id="clock">
<span id="clock"><script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span></div>
<span id="hours"><script language="JavaScript">document.write(hours); updateClock(); setInterval('currentTime.getHours ( )', 1000 )</script>
</div>
<div id="minutes"><script language="JavaScript">document.write(minutes + " " + suffix); updateClock(); setInterval('updateClock ()', 1000 )</script>
</div>

<!-- Date -->
<div class="date">
<script language="JavaScript">document.write(this_day_string)</script>
</div>

<!-- Month -->
<div class="month">
<script language="Javascript" type="text/javascript">
document.write(monthname[monthnum])
</script>
</div>

<!-- Weekday -->
<div class="weekday">
<script language="JavaScript">document.write(this_weekday_string)</script>
</div>

<div id="icon" class="icon">
<img id="weatherIcon" width="40" height="40"/>
</div>

<div id="WeatherContainer">
<div id="TextContainer">

<p style="font-family:HelveticaNeueUltraLight; " id="temp"></p>
</div>

</div>


</body>
</html>


[Edited by minegro on 02-May-11 18:59]
05-May-11 05:54
@minegro: I think all you'd need to do is create 3 spans:

<span id="hours">&nbsp;</span>
<span id="minutes">&nbsp;</span>
<span id="seconds">&nbsp;</span>

Then replace:


document.getElementById("clock").firstChild.nodeValue = currentTimeString;


with:


document.getElementById("hours").firstChild.nodeValue = currentHours;
document.getElementById("minutes").firstChild.nodeValue = currentMinutes;
document.getElementById("seconds").firstChild.nodeValue = currentSeconds;


Cheers,
Matt

--
Matt Doyle, Elated
05-May-11 23:31
matt,

Thanks so much for the help. I actually figured it out. Without having to re-write all the code and clean everything up to make up for my novice discrepancies, The quickest and easiest thing was to create a separate update function for each component in the clock and displaying them that way. I think the problem is that I have all the date and weather functions combined on one thing and they're not the most efficiently written as I was figuring it out as I went along. When I've learned a bit more I'll be able to go back in and re-write all the code much cleaner.

Thanks again though, I really appreciate the response.

Warmest,
09-May-11 00:58
@minegro: Great, glad you got it working

--
Matt Doyle, Elated
09-May-11 13:20
Good stuff!
I used it to create an analogic clock:

http://apps.mathieu-rodic.com/Beautiful/Clock
10-May-11 02:28
@creaweb: Cool, I like it

--
Matt Doyle, Elated
21-Jun-11 08:48
Great job on clock and documentation! Thanks so much for the information.
I have one question, when I attempt to seed the time to start the clock, I am getting error on console .

currentTime.getHours is not a function

When I return the code to new date(), my clock appears, this tells me somehow the formatting of my variable time isn't correct? Can you help me understand what format the data should be in? I am pulling time from our iseries.

thanks so much in advance, sorry for the noob question.

Dissi
23-Jun-11 03:43
@Dissi: This article lists the various date formats that you can pass to 'new Date()':

http://www.elated.com/articles/working-with-dates/

Hope that helps!
Matt

--
Matt Doyle, Elated
23-Jun-11 09:27
hm, I saw the article and I think I have followed the guidelines but I'm still getting errors. Although the error message is different now. I put an alert after I load currentTime and it tells me invalid date. The date I'm loading into the variable is formatted as follows: '2011,06,23,09,18,23'. I have tested by hardcoding in those values and still get invalid date.

I must need more coffee....

What I am trying to accomplish is to load a date with date and time values to start my clock. It sounded sooo easy.

thanks for all your help, sorry im still stuck.

Dis
23-Jun-11 22:46
@Dissi: Your date format works fine for me:


<script>
x = new Date ( 2011,06,23,09,18,23 );
alert(x);
</script>


This displays the following alert:

Sat Jul 23 2011 09:18:23 GMT+1000 (EST)

Matt

--
Matt Doyle, Elated
24-Jun-11 08:54
ah well, once I realized i was not updating my current copy of the html. All was fine.

thanks for all your help!

Dis
27-Jun-11 22:26
@Dissi: Great, glad you got it working!

--
Matt Doyle, Elated
13-Jan-12 04:20
Great post.. Thanks for sharing this.. i was searching for something just like this one..
25-Feb-12 04:50
Here is the code I finally settled on, which I think is correct, it works for me:


<style type="text/css">
#countbox { font-family: Arial, Helvetica, sans-serif; font-weight:bold; text-align:left; font-size: 85px; color: #5A0A4F; background-color: #CFCCCC; border: 12px solid #CFCCCC; padding-top: 32px; padding-bottom: 8px; padding-left: 141px; padding-right: 47px;}
</style>

<script type="text/javascript">
dateFuture = new Date(2045,0,1,0,0,0);
function GetCount(){
dateNow = new Date();
//grab current date

amount = dateFuture.getTime() - dateNow.getTime();

//calc milliseconds between dates

delete dateNow;

// time is already past if(amount < 0)

{document.getElementById('countbox').innerHTML="LIVE UTOPIA!<br>Singularity is<br>here...<br><i>NOW!</i> &nbsp; &#9829; &#9829; &#9829;";}

// date is still good
else{days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days

amount=amount%86400;

hours=Math.floor(amount/3600);//hours

amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +"&nbsp; day"+((days!=1)?"s":"")+",<br>";}

if(days != 0 || hours != 0){out += hours +"&nbsp; hour"+((hours!=1)?"s":"")+",<br>";}

if(days != 0 || hours != 0 || mins != 0){out += mins +"&nbsp; minute"+((mins!=1)?"s":"")+",<br>";}

out += secs +""+((secs==1)?"&nbsp; second":"&nbsp; seconds")+".";

document.getElementById('countbox').innerHTML=out;

setTimeout("GetCount()", 1000);

}
}

window.onload=GetCount;//call when everything has loaded

</script><div id="countbox" div style="margin-top: 26px; margin-left: 90px; margin-right: 90px;">

</div>
</body>
</html>


[Edited by SU45 on 25-Feb-12 05:04]
27-Feb-12 22:20
@SU45: Glad you got it working how you wanted in the end

--
Matt Doyle, Elated
23-Aug-12 07:35
Hi good morning,
I like the script, but I was wondering how I can add a leading 0 (zero) for hours from 0:00 to 9:00 i.e. 07:35 a.m.

Thanks!

- Robert.

Edit: Never mind my question, I already figured it out when I came back with my coffee.. it's a little early in the morning

currentHours = ( currentHours == 0 ) ? 10 : "0" + currentHours;

^^ Is what I added.
Edit 2: Ok that didn't work

But I bet this does..
// Pad the hours, minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;

Seems I wasn't awake after all

[Edited by Robert30 on 23-Aug-12 11:38]
24-Aug-13 09:23
The way the javascript is written causes resources of the clock not to be free and stay alive in memory. After testing this code I noticed the memory of the browser session was being eaten up because the updateClock function you've assigned via setInterval calling the javascript function, keeps a live reference to everything that was in-scope of the function call during that function call (whether it uses it or not). This keeps all variables in the updateClock function alive in memory until it's eaten all memory possible and not releasing the reference. You can release this by setting the setInterval and embedding the funtion in the same statement. It's not a memory leak in the function, but the way it's implemented that causes this problem.

The way around this is to do the following;

<script type="text/javascript">

setInterval(function updateClock() {
var monthNames = ["January", "February", "March", "April", "May", "Jume", "July", "August", "Spetember", "October", "November", "December"];
var currentTime = new Date();
var currentDay = currentTime.getDate();
var currentMonth = monthNames[currentTime.getMonth()];
var currentYear = currentTime.getYear();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
var timeOfDay = (currentHours < 12) ? "AM" : "PM";
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
currentHours = (currentHours == 0) ? 12 : currentHours;
var currentTimeString = currentMonth + " " + currentDay + ", " + currentYear + " " + currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
delete currentTime;
}, 1000);

</script>

You could make this a anonymous function if you like.

Hope this helps somebody trying to achieve a active clock on your web page without killing memory on the client.

[Edited by bobbyhabib on 24-Aug-13 09:31]
25-Mar-15 00:29
Undoubtedly an awesome article! easy to understand, very informative and most importantly the code worked just as i wanted!
Thank you
28-Feb-16 10:38
var d = new Date();

var date = d.getDate();

var month = d.getMonth();
var montharr =["Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
month=montharr[month];

var year = d.getFullYear();

var day = d.getDay();
var dayarr =["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"];
day=dayarr[day];

var hour =d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();

document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year;
document.getElementById("time").innerHTML=hour+":"+min+":"+sec;

if you have any problem then here is a complete tutorial on www.talkerscode.com with demo http://talkerscode.com/webtricks/digital-clock-with-complete-time-and-date-using-css-and-javascript.php
29-Feb-16 07:25
If you guys who like spamming your 'solutions' could get up to date, it would be nice. That way you actually ADD something useful instead of just repeating 'stuff'.

You do not need to have arrays holding weekday names and month names any more, which then needs converting for the visitor language. Instead you can use the .toLocaleDateString (Supported in Firefox, Chrome, IE 11+ Opera, Safari) which can output the information in the same language as the visitors browser is using.

Example:


<script type="text/javascript">
var objDate = new Date();
locale = navigator.language;
month = objDate.toLocaleDateString(locale, { month: "long" });
wkday = objDate.toLocaleDateString(locale, { weekday: 'long' });
document.write("It is a " + wkday + " in " + month);
</script>


This gets the browser language from "navigator.language" property then when you pass that to the .toLocaleDateString() method as a parameter it will return the weekday name or month name in the appropriate language for the end user


A Mozilla Developer Walkthrough:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

 
New posts
Old posts

Follow Elated