Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Modifying countdown script to end at specific hour instead of day

    Hi everyone,

    I have a countdown script I'd like to modify so that the countdown ends at a specific hour, and not on a particular day at midnight. I'm new to coding (Ruby), so still trying to get the hang of Javascript:

    Code:
     
    	var current="Expired"
    	var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
     
    	function countdown(yr,m,d){
    		theyear=yr;themonth=m;theday=d
    		var today=new Date()
    		var todayy=today.getYear()
    		if (todayy < 1000)
    		todayy+=1900
    		var todaym=today.getMonth()
    		var todayd=today.getDate()
    		var todayh=today.getHours()
    		var todaymin=today.getMinutes()
    		var todaysec=today.getSeconds()
    		var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
    		futurestring=montharray[m-1]+" "+d+", "+yr
    		dd=Date.parse(futurestring)-Date.parse(todaystring)
    		dday=Math.floor(dd/(60*60*1000*24)*1)
    		dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
    		dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
    		dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
    		if(dday==0&&dhour==0&&dmin==0&&dsec==1){
    			document.getElementById('counter').style.display='none';
    			document.getElementById('expired').style.display='block';
    			return
    		}
    		else{
    			document.getElementById('countdown_day').innerHTML=dday;
    			document.getElementById('countdown_hour').innerHTML=dhour;
    			document.getElementById('countdown_min').innerHTML=dmin;
    			document.getElementById('countdown_sec').innerHTML=dsec;
    			setTimeout("countdown(theyear,themonth,theday)",1000)
    		}
    	}
     
     
     
    	//MODIFY THIS LINE: enter the count down date using the format year/month/day
            //e.g. countdown(2009, 03, 23);
    	countdown(2011, 12, 24);
    I've tried to play with it by changing the following in green:

    Code:
    	
    
    function countdown(yr,m,d,h){
    		theyear=yr;themonth=m;theday=d;thehour=h
    .
    .
    .
    setTimeout("countdown(theyear,themonth,theday,thehour)",1000)
    .
    .
    countdown(2011, 12, 24, 10)
    But I don't seem to be getting anywhere.

    Any tips or pointers to push me in the right direction is much appreciated.

    Thanks!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    More ancient code (from Javascript Kit! ) Try this instead:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    var timeInSecs;
    var ticker;
    var BigDay;
    
    function startTimer(){
    var today = new Date();
    BigDay = new Date("December 23, 2011 18:00:00");  // specific date and time hh:mm:ss
    timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
    if (timeInSecs < 0) {
    document.getElementById("countdown").innerHTML = "The offer has now expired";
    return false;
    }
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    document.getElementById("countdown").innerHTML = "The offer has now expired";
    }
    
    var days = Math.floor(secs/86400);
    secs %= 86400;
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    
    var result = hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds
    result = days + " days " + result;
    document.getElementById("countdown").innerHTML = "Time remaining until the offer expires = " + result;
    }
    
    </script>
    
    </head>
    
    <body onload = "startTimer()">
    
    <span id="countdown" style="font-weight: bold;"></span>
    
    </body>
    </html>


    "I think there is a world market for maybe five computers." — Thomas Watson, chairman of IBM, 1943.
    Last edited by Philip M; 12-20-2011 at 09:33 AM. Reason: iImproved

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    forcedtriple (12-21-2011)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Philip,

    Thanks so much for the quick reply and for writing an entirely new script.

    Forgive the beginner question -- I've put the entire code into a blank html file to see how it works and to tinker from there, but don't actually see the countdown (it's a blank page).

    I'm assuming that this line:
    Code:
    <span id="countdown" style="font-weight: bold;"></span>
    in the body is where the following line should render, depending on whether the countdown has expired or not:

    Code:
    innerHTML = "Time remaining until the offer expires = " + result;
    But nothing is showing in the HTML file.

    I'm sure it's something basic I've missed.

    Thanks again for the help!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Sorry, mea culpa, due to a copying error one line of the script was incomplete and I did not notice as it is off the screen.

    var result = hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";


    Correct that and it will work! Shows how a tiny error will cause total disaster!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    forcedtriple (12-22-2011)

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Brilliant, thanks so much! Tinkering with it now to fit within the image countdown I had previously...thanks again!

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Philip (or anyone else with expertise),

    I just realised that the timer counts down to client-side time. Is there a way to modify the code so that there is an offset, so it can grab the server time adjust the countdown accordingly?

    That would give an absolute countdown function, which is what I'm attempting to do.

    Thanks for the help!

  • #7
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've played around with this a little, any input as to whether I'm on the right track? I'm pulling the server time (my app is written in Ruby) using the helper <%= expiry_date_time %>.

    Code:
    function startTimer(){
    	var today = new Date();
    	var serverTime = new Date("<%= expiry_date_time %>");
    	var modify_to_client_time = serverTime.getTimezoneOffset();
    	var localtime = ?(not sure);
    	var expirationTime = localtime*60*modify_to_client_time;
    	BigDay = new Date(expirationTime);  
    	timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
    	if (timeInSecs < 0) {
    	document.getElementById("countdown").innerHTML = "The offer has now expired";
    	return false;
    	}
    	ticker = setInterval("tick()",1000); 
    	tick(); // to start counter display right away
    Thanks!

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    http://www.javascriptkit.com/script/...rvertime.shtml

    or specify the BigDay in UTC time.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    forcedtriple (01-06-2012)

  • #9
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the help Philip! You pointed me in the right direction -- I was quite confused about the relative nature of time versus what was on my server, but figured it out in the end.

    In case others stumble upon this as well, here's what I did:

    Code:
    	var today = Date.UTC(<%= current_time_on_server %>);
    	BigDay = Date.UTC(<%= time_to_expire_fixed_on_server %>);
    The rest of Philip's code is still intact. What I wasn't realising was that the code finds the difference between the BigDay and today variables, and then just counts down between them. The rub is that the countdown only begins when the browser is loaded!

    So I set BigDay as a variable that pulled the expiration time directing from my server, and the start time (the today variable) as the current time on the server. So that gives an absolute start and end point despite where your user may browse from.

    If you're using Ruby (like I am), Time.now works well, just use the strftime method to get it in the proper UTC format for Javascript.

    Thanks again Philip!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •