I'm basically using a javascript countdown for one of my websites, it contains everything i need, however i want to expand on it but i am relatively new to js. Basically, it shows a message once the countdown has completed which is great, however i want to show a message alongside the countdown which is removed with the countdown when it reaches 0.
Example: "New Year in, {Countdown}" so the new year text along with the countdown should be removed when it hits 0 and replaced with the finished text.
Here is the script i am using:
<script language="JavaScript">
TargetDate = "January/01/2014 12:00 am";
BackColor = "";
ForeColor = "#000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "<span class='finish'>Finished!</span>";
</script>
<script language="javascript">
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<span class='digit'>" + s + "</span>";
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style=' font-weight:bold; background-color:" + backcolor +
"; color:" + forecolor + "'> </span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
Any help in getting this would be greatly appreciated!
Thanks :)
I think this is your ansswer, excuse If I didnt get ur question right.
DisplayFormat = "New Year in, {%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds}.";
I see you've got the simple answer, but here's a jQuery plugin if you'd like to have it a bit cleaner: http://jsfiddle.net/chrisdanek/C59hN/1/
Just target an element with date inside and will be turned into a counter
$('p.counter').countdownCounter({
format : 'New Year in %%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds!',
});
Edit: I’ve created a separate page for the plugin http://cou.io/code/countdown/ and added a few options.
Related
I'm trying to set up a countdown timer in WordPress, it works fine on Windows browsers but it shows NaN on iOS browsers eg: safari and chrome.
stackflow is asking me to add some details but I don't have more details to post or at least I can't think of anything so here more details.
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style='background-color:" + backcolor +
"; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
I have a Javascript code for a countdown timer on a date. I want to use this code in a online shop order process. However I don't want to edit the date every day manually. I want that the timer counts everyday to the same target time.
Note: the variable responsible for that is: deadline
function updateTimer(deadline){
var time = deadline - new Date();
return {
'days': Math.floor( time/(1000*60*60*24) ),
'hours': Math.floor( (time/(1000*60*60)) % 24 ),
'minutes': Math.floor( (time/1000/60) % 60 ),
'seconds': Math.floor( (time/1000) % 60 ),
'total' : time
};
}
function animateClock(span){
span.className = "turn";
setTimeout(function(){
span.className = "";
},700);
}
function startTimer(id, deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//animations
var spans = clock.getElementsByTagName("span");
animateClock(spans[3]);
if(timer.seconds == 59) animateClock(spans[2]);
if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);
//check for end of timer
if(timer.total < 1){
clearInterval(timerInterval);
clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
}
}, 1000);
}
window.onload = function(){
var deadline = new Date("august 26, 2017 17:15:00");
startTimer("clock", deadline);
};
I am creating a countdown timer for bidding auction, for single product it is working but when I make it dynamic for all products it is showing the timer but seconds are not changing, though the timer is working properly, but timer is not running in frontend as you can see in this link http://proffice.in/bidapp/ please help me with the javascript error. The error showing I console:
Uncaught TypeError: Cannot set property 'innerHTML' of null on this line document.getElementById("cntdwn_"+show_id).innerHTML = DisplayStr;
on countdown.js
<?php
while($pro_data = $db->jas_fetch_array($products)){
$closedate = date_format(date_create($pro_data['selling_end_date']), 'm/d/Y H:i:s');?>
<script>
TargetDate = "<?php echo $closedate ?>";
ForeColor = "#04BFBF";
show_id="<?=$pro_data["id"]?>";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%%d:%%H%%H:%%M%%M:%%S%%S";
FinishMessage = "Bidding closed!";
</script>
<script language="JavaScript" src="<?=$wwwroot;?>assets/js/countdown.js"></script>
<?php } ?>
// here is my coutdown.js file
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}
function CountBack(secs,show_id) {
if (secs < 0) {
document.getElementById("cntdwn_"+show_id).innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn_"+show_id).innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor,show_id) {
document.write("<span id='cntdwn_"+show_id+"' style='background-color:" + backcolor +
"; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(show_id)=="undefined")
show_id = "";
if (typeof(TargetDate)=="undefined")
TargetDate = "21/06/2017 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor,show_id);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs,show_id);
// console is showing error in this line
document.getElementById("cntdwn_"+show_id).innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
What you are doing is that you are just creating your script using the loop. But not creating the Div where you need to show the counter, which is of course, your counter.
Please check whether any div with id "cntdwn_" with your corresponding show_id exists or not. In your url, I was not able to find on the page. Hope it helps. Let me know if it doesn't. :)
i want to make a countdown timer for a project in which the countdown start when the user inputs some time in 00:00:00 h-m-s format, i have written some code which is half correct and i'm lost what to do next
// Wait for user to click the button before reading the value
window.onload=function(){
var work = document.getElementById("dl");
work.addEventListener("click", handler);
}
function handler() {
//taking user input
var time1 = document.getElementById('hms').value;
//splitting it to seperate variables
var pieces = time1.split(":");
var hours = pieces[0];
var minutes = pieces[1];
var seconds = pieces[2];
//just calculating total number of seconds
seconds = seconds + minutes*60 + hours*3600;
var tot = seconds + minutes*60 + hours*3600;
// Save the interval's handle to `timer`
var timer = setInterval(countdown, 1000);
function countdown() {
var container = document.getElementById('count');
var counter = 0, k=1, j=1, i=0, s1= pieces[2];
//loop to print the timer
for(i=0; i<tot; i++){
if(seconds>0){
counter ++ ;
if(counter==60*k){
minutes--;
k++;
}
if(counter==3600*j){
hours--;
j++;
}
container.innerHTML = 'Please wait <b>' + hours + '</b> hours, <b>' + minutes + '</b> minutes, <b>' + seconds + '</b> seconds';
}//end of if
else {
container.innerHTML = 'Time over';
clearInterval(timer);
}
}
/* seconds--;
if (seconds > 0) {
container.innerHTML = 'Please wait <b>' + seconds + '</b> seconds..';
} else {
container.innerHTML = 'Time over';
clearInterval(timer);
} */
}
}
<input type="text" id="hms" placeholder="enter in the format 00:00:00 " />
<input type="button" id="dl" value="Start" />
<div id="count"></div>
i know i have made this complicated, can someone please make it simple? it will be a great help, thanks!
I have modified the function handler.You can try this.
function handler() {
//taking user input
var time1 = document.getElementById('hms').value;
//splitting it to seperate variables
var pieces = time1.split(":");
var hours = pieces[0];
var minutes = pieces[1];
var seconds = pieces[2];
var time = {
hours: hours * 1,
minutes: minutes * 1,
seconds: seconds * 1
};
// Save the interval's handle to `timer`
var timer = setInterval(countdown, 1000);
function countdown() {
var container = document.getElementById('count');
if (time.seconds > 0) {
time.seconds--;
}
else {
if (time.minutes > 0) {
time.minutes--;
time.seconds = 60;
}
else {
time.minutes = 60;
time.seconds = 60;
time.hours--;
}
}
if (time.hours >= 0) {
container.innerHTML = 'Please wait <b>' + time.hours + '</b> hours, <b>' + time.minutes + '</b> minutes, <b>' + time.seconds + '</b> seconds';
}
else {
container.innerHTML = 'Time over';
clearInterval(timer);
}
}
}
I have a javascript countdown which doesn't seem to be working on IE nor on safari, all tested on windows 7, works fine with chrome and firefox. I'm not looking to change to a jQuery countdown due to certain restrictions on the website so really looking to get this working across all browsers.
<script language="JavaScript">
TargetDate = "January/01/2014 12:00 am";
BackColor = "";
ForeColor = "#000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "<span class='finish'>Finished!</span>";
</script>
<script language="javascript">
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<span class='digit'>" + s + "</span>";
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style=' font-weight:bold; background-color:" + backcolor +
"; color:" + forecolor + "'> </span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
Countdown just displays as NaN. Any help greatly appreciated.
The following line is returning NaN
var dthen = new Date(TargetDate);
Your best bet, to ensure it'll work across browsers is to use the following Date constructor:
new Date(year, month, day, hours, minutes, seconds, milliseconds);
So, dthen will become:
var dthen = new Date(2014, 0, 1, 12, 0, 0, 0);
You may want to define those values at the top, like you have with TargetDate but this should put you on the right track.