I am adding a countdown timer to a single CMS page that is counting down to September 20th, 2015.
I put all the javascript functions in js/countdownClock.js
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock(){
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if(t.total<=0){
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock,1000);
}
var deadline = 'September 20 2015 08:59:59 UTC+0800';
initializeClock('clockdiv', deadline);
Then I called the file in the CMS page under the Layout Update XML sections:
<reference name="head">
<action method="addItem">
<type>js</type><script>countdownClock.js</script>
</action>
</reference>
In the Content section of the page I put in:
<div id="clockdiv">
<div><span class="days">.</span>
<div class="smalltext">Days</div>
</div>
<div><span class="hours">.</span>
<div class="smalltext">Hours</div>
</div>
<div><span class="minutes">.</span>
<div class="smalltext">Minutes</div>
</div>
<div><span class="seconds">.</span>
<div class="smalltext">Seconds</div>
</div>
</div>
When I load the page however, only the labels Days, Hours, Minutes, Seconds displays. The javascript is supposed to calculate the time remaining and output the information in the content of the page with the span tags.
Does anyone know where I'm going wrong? Is the page even calling the javascript correctly?