SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for a simple countdown script

    I'm looking for a simple bit of a javascript that will display a minutes and seconds countdown, starting from 30 mins (or whatever number of minutes I set it to) in the future. Each time the user refreshes the browser, the script should reset back to 30 mins and start counting down again.

    I found this complete script by following a Sitepoint link:

    <HTML>
    <HEAD>
    <TITLE>Countdown Clock</TITLE>
    <SCRIPT>
    <!--
    //This clock tells you the exact days, hours, minutes, and seconds from a particular date.

    var targetDate = "Feb 28, 2002"; //The day that you want to solve that it's how long from now.

    var theDay = new Date(targetDate)
    var DayTill //The string that is going to put all numbers together and make sense.

    function countdown()
    {
    var today = new Date() //Create an Date Object that contains today's date.
    var second = Math.floor((theDay.getTime() - today.getTime())/1000)
    /*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
    and devide it into 1000 to get the seconds from now to theDay.*/

    var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
    var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
    var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day

    CDay= day //Correct day
    CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
    CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
    CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.

    DayTill = CDay + " days, " + CHour + " hours "
    //Rewrite the string to the correct information.

    document.clock.countdown.value = DayTill //Make the particular form chart become "Daytill"
    var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad = "countdown()">
    <FORM NAME = "clock">
    You are <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"> from <script>document.write(targetDate);</script>.<BR>
    </FORM>
    </BODY>
    </HTML>


    ...but when I change the line

    DayTill = CDay + " days, " + CHour + " hours "

    to

    DayTill = CDay + " days, " + CHour + " hours " + CMinute " mins "

    I get javascript errors on the page (and I'm not sure why).

    Can anyone put me back on track?

    Thanks.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DayTill = CDay + " days, " + CHour + " hours " + CMinute + " mins ";

    you forgott the (+)

    PHP Code:

    <HTML
    <
    HEAD
    <
    TITLE>Countdown Clock</TITLE
    <
    SCRIPT
    <!-- 
    //This clock tells you the exact days, hours, minutes, and seconds from a particular date. 

    var targetDate "Feb 28, 2002"//The day that you want to solve that it's how long from now. 

    var theDay = new Date(targetDate
    var 
    DayTill //The string that is going to put all numbers together and make sense. 

    function countdown() 

    var 
    today = new Date() //Create an Date Object that contains today's date. 
    var second Math.floor((theDay.getTime() - today.getTime())/1000
    /*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay. 
    and devide it into 1000 to get the seconds from now to theDay.*/ 

    var minute Math.floor(second/60//Devide "second" into 60 to get the minute 
    var hour Math.floor(minute/60//Devide "minute" into 60 to get the hour 
    var day Math.floor(hour/24//Devide "hour" into 60 to get the day 

    CDayday //Correct day 
    CHourhour 24 //Correct hour, after devide into 24, the remainder deposits here. 
    CMinuteminute 60 //Correct minute, after devide into 60, the remainder deposits here. 
    CSecondsecond 60 //Correct second, after devide into 60, the remainder deposits here. 

    DayTill CDay " days, " CHour " hours " CMinute " mins " CSecond " secs ";
    //Rewrite the string to the correct information. 

    document.clock.countdown.value DayTill //Make the particular form chart become "Daytill" 
    var counter setTimeout("countdown()"1000//Create the timer "counter" that will automatic restart function countdown() again every second. 

    //--> 
    </SCRIPT> 
    </HEAD> 
    <BODY onLoad = "countdown()"> 
    <FORM NAME = "clock"> 
    You are <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"> from <script>document.write(targetDate);</script>.<BR> 
    </FORM> 
    </BODY> 
    </HTML> 
    Last edited by Andrew-J2000; Feb 27, 2002 at 06:08.

  3. #3
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    How stupid do I feel?
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe,Dont worry we all do thingsd like that, gets damn annoying if you been doing it for ages, you just skip the mistake normally :P

  5. #5
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your sympathy.

    At the risk of pushing my luck - how hard would it be for you to modify the script for me to make it show a countdown (only mins and secs needed) from however many minutes I specify in the script(eg. 30)? Each time the user refreshes the browser/page, the countdown should reset to the start value and start counting down again. Oh, and when it gets to zero, it should either stop there, or it should continue counting down (or up, depending on how you look at it) using negative values?

    I've tried mucking around with it to get it working myself, but I'm not over-familiar with javascript, and my attempt does not reset the countdown when I refresh the page. Here's my attempt:

    <HTML>
    <HEAD>
    <TITLE>Countdown Clock</TITLE>
    <SCRIPT>
    <!--

    var DayTill //The string that is going to put all numbers together and make sense.

    function countdown()
    {
    var countdown_mins = 24 // minutes to countdown from.
    var countdown_secs = 24 * 600
    var today = new Date() //Create an Date Object that contains today's date.
    var second = Math.floor((today.getTime())/1000)
    second = second - countdown_secs

    var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
    var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
    var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day

    CDay= day //Correct day
    CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
    CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
    CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.

    DayTill = CMinute + " mins " + CSecond + " secs ";
    //Rewrite the string to the correct information.

    document.clock.countdown.value = DayTill //Make the particular form chart become "Daytill"
    var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad = "countdown()">
    <FORM NAME = "clock">
    <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc">
    </FORM>
    </BODY>
    </HTML>
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    urm that reminds me of a game i played, although it uses cookies to keep track of time

    http://pimpwar.com

    in options it enable u to display a count down when you get a new turn is that the sorta thing you want?

  7. #7
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simpler the better. I think the code in the example I'm using is more than would be needed. I don't need any fancy display - just a plain boring text countdown which resets to 30 mins (or whatever) whenever the page is refreshed. I'm being incredibly lazy here, because I could (and should) read up on javascript syntax myself. But I hardly ever use javascript on my sites - preferring to stick to server-side PHP and MySQL (which I'm reasonably handy at).
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  8. #8
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a suggestion to have it as a count down where you configer in the top the amount of minuts you whant it to count down

    [VBS]
    <HTML>
    <HEAD>
    <TITLE>Countdown Clock</TITLE>
    <SCRIPT>
    <!--
    var timeInMin = "30"; //The minutes the count down should run.

    var theDay = new Date()
    var countDown = theDay.getTime()+(1000*60*timeInMin);
    var TimeTill //The string that is going to put all numbers together and make sense.

    function countdown()
    {
    var today = new Date() //Create an Date Object that contains today's date.
    var second = Math.floor((countDown - today.getTime())/1000)
    /*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
    and devide it into 1000 to get the seconds from now to theDay.*/


    var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
    var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
    var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day

    CDay= day //Correct day
    CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
    CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
    CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.

    var TimeTill = "";

    if(CDay)
    {
    TimeTill += CDay + ":";
    }
    if(CHour || CDay)
    {
    if(CHour < 10)
    {
    TimeTill += "0";
    }
    TimeTill += CHour + ":";
    }
    if(CMinute < 10)
    {
    TimeTill += "0";
    }
    TimeTill += CMinute + ":";
    if(CSecond < 10)
    {
    TimeTill += "0";
    }
    TimeTill += CSecond;

    document.clock.countdown.value = TimeTill //Make the particular form chart become "Daytill"
    var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad = "countdown()">
    <FORM NAME = "clock">
    <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"><BR>
    </FORM>
    </BODY>
    </HTML>
    [/VBS]

  9. #9
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a suggestion to have it as a count down where you configer in the top the amount of minuts you whant it to count down

    [VBS]
    <HTML>
    <HEAD>
    <TITLE>Countdown Clock</TITLE>
    <SCRIPT>
    <!--
    var timeInMin = "30"; //The minutes the count down should run.

    var theDay = new Date()
    var countDown = theDay.getTime()+(1000*60*timeInMin);
    var TimeTill //The string that is going to put all numbers together and make sense.

    function countdown()
    {
    var today = new Date() //Create an Date Object that contains today's date.
    var second = Math.floor((countDown - today.getTime())/1000)
    /*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
    and devide it into 1000 to get the seconds from now to theDay.*/


    var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
    var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
    var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day

    CDay= day //Correct day
    CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
    CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
    CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.

    var TimeTill = "";

    if(CDay)
    {
    TimeTill += CDay + ":";
    }
    if(CHour || CDay)
    {
    if(CHour < 10)
    {
    TimeTill += "0";
    }
    TimeTill += CHour + ":";
    }
    if(CMinute < 10)
    {
    TimeTill += "0";
    }
    TimeTill += CMinute + ":";
    if(CSecond < 10)
    {
    TimeTill += "0";
    }
    TimeTill += CSecond;

    document.clock.countdown.value = TimeTill //Make the particular form chart become "Daytill"
    var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad = "countdown()">
    <FORM NAME = "clock">
    <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"><BR>
    </FORM>
    </BODY>
    </HTML>
    [/VBS]

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would there be a way to add some language to this for when the clock counts down totally?

    Like when the clock totally counts down, then some text appears like this maybe:

    "Hey, you're outta time, Dude!"

    Thanks

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lele
    here is a suggestion to have it as a count down where you configer in the top the amount of minuts you whant it to count down

    Code:
     <HTML> 
     <HEAD> 
     <TITLE>Countdown Clock</TITLE> 
     <SCRIPT> 
     <!-- 
     var timeInMin = "30"; //The minutes the count down should run. 
     
     var theDay = new Date() 
     var countDown = theDay.getTime()+(1000*60*timeInMin);
     var TimeTill //The string that is going to put all numbers together and make sense. 
     
     function countdown() 
     { 
     	var today = new Date() //Create an Date Object that contains today's date. 
     	var second = Math.floor((countDown - today.getTime())/1000) 
     	/*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay. 
     	and devide it into 1000 to get the seconds from now to theDay.*/ 
     	
     	
     	var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute 
     	var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour 
     	var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day 
     	
     	CDay= day //Correct day 
     	CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here. 
     	CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here. 
     	CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here. 
     	
     	var TimeTill = "";
     	
     	if(CDay)
     	{
     		TimeTill += CDay + ":";
     	}
     	if(CHour || CDay)
     	{
     		if(CHour < 10)
     		{
     			TimeTill += "0";
     		}
     		TimeTill += CHour + ":";
     	}
     	if(CMinute < 10)
     	{
     		TimeTill += "0";
     	}
     	TimeTill += CMinute + ":";
     	if(CSecond < 10)
     	{
     		TimeTill += "0";
     	}
     	TimeTill += CSecond;
     	
     	document.clock.countdown.value = TimeTill //Make the particular form chart become "Daytill" 
     	var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second. 
     } 
     //--> 
     </SCRIPT> 
     </HEAD> 
     <BODY onLoad = "countdown()"> 
     <FORM NAME = "clock"> 
     <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"><BR> 
     </FORM> 
     </BODY> 
     </HTML>
    I tried that script and it works perfectly in Firefox, however I get a "To help protect your security blablabla" warning in Internet Explorer with this.
    Is there a way to make it work without that warning?
    Everyone who uses bandwidth to refer to the
    amount of data transferred should also start
    using phrases like "I travelled a distance of
    120mph today.". Have fun attracting laughter.


Bookmarks

Posting Permissions

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