• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • Last Modified:

Javascript Display link

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;

window.onload = function () {
    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,
        pad = function (n) {
            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;

    // pad any numbers less than 9 with a leading 0
    secs = pad(secs);
    mins = pad(mins);
    hours = pad(hours);

    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>

Open in new window

0
smares323
Asked:
smares323
  • 4
  • 4
1 Solution
 
RobOwner (Aidellio)Commented:
So what exactly is your question?
0
 
Michel PlungjanIT ExpertCommented:
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")\' />';


window.onload = function () {
    var then = new Date(when.getTime());
    then.setMinutes(then.getMinutes()+30);
    var d = new Date();
    if (d.getTime() >= when.getTime() && d.getTime() <then.getTime()) {
      document.getElementById('btnappear').innerHTML=link;
      countDown('btnappear', '', timeToShow); 
    }
}

function countDown(elID, output, seconds) {
    var mins,
    secs = seconds,
        pad = function (n) {
            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;

    // pad any numbers less than 9 with a leading 0
    secs = pad(secs);
    mins = pad(mins);
    hours = pad(hours);

    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);
    }
}

Open in new window

0
 
smares323Author Commented:
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Michel PlungjanIT ExpertCommented:
Yes it is. Change the date to now
0
 
smares323Author Commented:
Great Work
0
 
smares323Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
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,
      aDay = 24*anHour,
      d = Math.floor(time / aDay),
      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)  
    document.getElementById('btnappear').innerHTML=link;
    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);
  }
}

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

// countdown by kolink/niet-the-dark-absol
function countDown(elID, output, seconds) {
    var mins,
    secs = seconds,
    pad = function (n) {
      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;

    // pad any numbers less than 9 with a leading 0
    secs = pad(secs);
    mins = pad(mins);
    hours = pad(hours);

    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);
    }
}

Open in new window

0
 
smares323Author Commented:
how can I use the Server date time  instead of  new Date();
0
 
Michel PlungjanIT ExpertCommented:
when = new Date(<?php echo time(); ?>*1000);

and if needed

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

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now