Solved

Posted on 2014-03-17
Medium Priority
269 Views
Javascript for the following logic if on a specific date example 03/20/14 hours in between 1230 pm and 1:00 pm display the button, Else I will set the minutes dynamically for the oneHour variable. I will always need to capture the real date and time while the user is on the page.

``````<script type="text/javascript">
var oneHour = 60 * 60, // 60 seconds * 60 minutes dynamic variable
twentyMins = 20 * 60, // 20 minutes * 60 seconds
oneMin = 60, // 60 seconds
fiveSecs = 5;

countDown('btnappear', '<input type="button" value="Get free MCLE Credit" name="MCLE" onclick=window.open("index.cfm","_self") />', oneHour);
}

function countDown(elID, output, seconds) {
var mins,
secs = seconds,
return n > 9 ? n : '0' + n;
};

// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); //  60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;

document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;

// instead of returning, just don't call setTimout if we are done
if (seconds !== 0) {
seconds -= 1;
// there is no need to pass a string to setTimout, you just pass the function name,
// followed by the timeout in ms, followed by any params
//setTimeout(countDown, 1000, elID, output, seconds);
setTimeout("countDown('" + elID + "', '" + output + "', " + (seconds) + ")", 1000);
}

}
</script>
<div style="margin:10px; 0; 10px; 10px;" id="btnappear"></div>
``````
0
Question by:smares323
• 4
• 4

LVL 43

Expert Comment

ID: 39936161
So what exactly is your question?
0

LVL 75

Accepted Solution

Michel Plungjan earned 2000 total points
ID: 39936193
Your script works as a countdown

http://jsfiddle.net/mplungjan/ZQNyv/

You want to change the script so it shows the button for one hour on a specific date?

This will do that

I changed the top of the script plus this line

document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time link is still active: ' + hours + ':' + mins + ':' + secs +'<br/>'+link;

http://jsfiddle.net/mplungjan/HXP5t/

``````var oneHour = 60 * 60, // 60 seconds * 60 minutes dynamic variable
twentyMins = 20 * 60, // 20 minutes * 60 seconds
thirtyMins = 30 * 60, // 20 minutes * 60 seconds
oneMin = 60, // 60 seconds
fiveSecs = 5,
when = new Date(2014,2,18,8,32,0), // change to the date and time you want to show - months start at 0
timeToShow=thirtyMins
link = '<input type="button" value="Get free MCLE Credit" name="MCLE" onclick=\'window.open("index.cfm","_self")\' />';

var then = new Date(when.getTime());
then.setMinutes(then.getMinutes()+30);
var d = new Date();
if (d.getTime() >= when.getTime() && d.getTime() <then.getTime()) {
countDown('btnappear', '', timeToShow);
}
}

function countDown(elID, output, seconds) {
var mins,
secs = seconds,
return n > 9 ? n : '0' + n;
};

// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); //  60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;

document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time link is still active: ' + hours + ':' + mins + ':' + secs +'<br/>'+link;

// instead of returning, just don't call setTimout if we are done
if (seconds !== 0) {
seconds -= 1;
// there is no need to pass a string to setTimout, you just pass the function name,
// followed by the timeout in ms, followed by any params
//setTimeout(countDown, 1000, elID, output, seconds);
setTimeout("countDown('" + elID + "', '" + output + "', " + (seconds) + ")", 1000);
}
}
``````
0

Author Comment

ID: 39937823
0

LVL 75

Expert Comment

ID: 39938133
Yes it is. Change the date to now
0

Author Closing Comment

ID: 39938162
Great Work
0

Author Comment

ID: 39938378
The date & time is only working if page is loaded after the date & time you have set, It does'nt work if you load the page before the date & time you have set.
0

LVL 75

Expert Comment

ID: 39938970
Okee,. That was like actual work

http://jsfiddle.net/mplungjan/HXP5t/

``````// show button script by mplungjan http://plungjan.name/
var oneMinInMilli=1000,//60*1000,
tId,
when = new Date(2014,2,19,9,56,0), // change to the date and time you want to show - months start at 0
timeToShow=30, // minutes - will be added to the date above
link = '<input type="button" value="Get free MCLE Credit" name="MCLE" onclick=\'window.open("index.cfm","_self")\' />';

function formatTime(time){
time = Math.abs(time);
var str= "",
aMinute =60*1000,
anHour = 60*aMinute,
h = Math.floor( (time - d * aDay) / anHour),
m = Math.round( (time - d * aDay - h * anHour) / aMinute);
if (d>0) str += d+" day"+(d==1?"":"s");

if (h==0) { str = ""; h=+h+(d*24); d=0}
else if (d>0) str += ", ";
str += h+" hour"+(h==1?"":"s")+" and ";
return str+m+" minute"+(m==1?"":"s");
}

function testTime() {
var then = new Date(when.getTime());
then.setMinutes(then.getMinutes()+timeToShow);
var d = new Date();
if (d.getTime() >= when.getTime() && d.getTime() <then.getTime()) {
clearInterval(tId)
timeToShow = parseInt((then.getTime()-d.getTime())/1000,10);
countDown('btnappear', '', timeToShow);
}
else {
var diff = d.getTime()-when.getTime();
document.getElementById('btnappear').innerHTML=(diff<0?"Button will appear in ":"You are too late by ")+formatTime(diff);
}
}

tId=setInterval(function() {
testTime();
},500);
}

function countDown(elID, output, seconds) {
var mins,
secs = seconds,
return n > 9 ? n : '0' + n;
};

// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); //  60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;

document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time link is still active: ' + hours + ':' + mins + ':' + secs +'<br/>'+link;

// instead of returning, just don't call setTimout if we are done
if (seconds !== 0) {
seconds -= 1;
// there is no need to pass a string to setTimout, you just pass the function name,
// followed by the timeout in ms, followed by any params
//setTimeout(countDown, 1000, elID, output, seconds);
setTimeout("countDown('" + elID + "', '" + output + "', " + (seconds) + ")", 1000);
}
}
``````
0

Author Comment

ID: 40007413
how can I use the Server date time  instead of  new Date();
0

LVL 75

Expert Comment

ID: 40008225
when = new Date(<?php echo time(); ?>*1000);

and if needed

when.setHours(when.getHours()+5); // 5 hours later
0

## Featured Post

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.