Solved

User Input To Countdown Timer 500 points

Posted on 2004-10-15
8
287 Views
Last Modified: 2008-03-10
hi

i have a countdown timer in javascript. the date is hardcoded into the function and im very happy with the way it works that way, but now i want the user to be able to select the date from a combobox(s) or textbox.

here is my function with required parameter:

setcountdown(2004,10,18,00,00,00)

as you can see the date is hardcoded into the function, but now i want it to work as i stated above --> user to be able to select dates from combobox(s) or textbox.

i tried solving this, but i have no success, so i need help on this.

any code, working examples, URL ideas etc are all welcome

thank you,

-sean-
0
Comment
Question by:ellandrd
  • 4
  • 3
8 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12318814

Say you have select boxes:

<select name="the_year">
<option value="2005">2005</option>
<option value="2004" selected>2004</option>
<option value="2003">2003</option>
</select>

<select name="the_month">
<option value="0">January</option>
<option value="1" selected>February</option>
<option value="2">March</option>
</select>

<select name="the_date">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">4</option>
</select>

<input type="button" onclick="setcountdown();">


Then, in your setcountdown function, do this:

var y = parseInt(document.forms['the_form'].elements['the_year'].value);
var m = parseInt(document.forms['the_form'].elements['the_month'].value);
var d = parseInt(document.forms['the_form'].elements['the_date'].value);

And then go from there...
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12319059
eh, you should leave the paramters the way it is in the countdown function but have a function that calls the countdown function

function CallCountDown( )
{
     var y = parseInt(document.forms['the_form'].elements['the_year'].value);
var m = parseInt(document.forms['the_form'].elements['the_month'].value);
var d = parseInt(document.forms['the_form'].elements['the_date'].value);

   etc...

setcountdown( y, m, d, h, m , s)
}



like so, no need to change existing code
   
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12319318
yes, it's ANOTHER way to do it.  No need to downgrade a perfectly acceptable solution.

Maybe we should write a function to call that calling function.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 12319677
what if my form is on another page? will it still work??
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12319747
?

If you're including the JS function like this:

<javascript type="text/css" src="javascript.js"></script>

Then both of the above solutions would still work.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 12319865
right i did what ye said, and i get a form on my page, i enter a date and click on the button, but nothing happens,

in the tool bar, the messgae is "done, but error on page"

any suggestions??

heres my code:
-----------------------
<html>
<head>
<script language="JavaScript1.2">
function setcountdown()
{
var yr = parseInt(document.forms['the_form'].elements['the_year'].value);
var mo = parseInt(document.forms['the_form'].elements['the_month'].value);
var da = parseInt(document.forms['the_form'].elements['the_date'].value);
hr=0;
min=0;
sec=0;
}

var occasion="deadline of updating this document"
var message_on_occasion="This Document was NOT updated on time!!"
var countdownwidth='590px'
var countdownheight='35px'
var countdownbgcolor='white'
var opentags='<font face="Trebuchet MS"><small>'
var closetags='</small></font>'
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''
function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}
if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')
window.onload=start_countdown
function countdown(){
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[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
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 on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Event already passed! "+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"Event already passed! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left till "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left to "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>
</head>
<body>
<form name="the_form">
<select name="the_year">
<option value="2005">2005</option>
<option value="2004" selected>2004</option>
<option value="2003">2003</option>
</select>
<select name="the_month">
<option value="0">January</option>
<option value="1" selected>February</option>
<option value="2">March</option>
</select>
<select name="the_date">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">4</option>
</select>
<input type="button" value="Start Countdown" onclick="setcountdown();">
</form>
<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>
</body>
</html>

p.s i also need the font to change to red when theres one day left on countdown...


cheers sean
0
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 500 total points
ID: 12320993
I'm slowly peeling away at this unneccessarily long code.

a) it is very solid design practice to indent your code.
b) declare your variables globally if you'll be referencing them from multiple functions.

Try this, let me know what's next:

<html>
<head>
<script language="JavaScript1.2">

var yr, mo, da, hr, min, sec;

function setcountdown()
{
      yr = parseInt(document.forms['the_form'].elements['the_year'].value);
      mo = parseInt(document.forms['the_form'].elements['the_month'].value);
      da = parseInt(document.forms['the_form'].elements['the_date'].value);
      hr=0;
      min=0;
      sec=0;
}

var occasion="deadline of updating this document"
var message_on_occasion="This Document was NOT updated on time!!"
var countdownwidth='590px'
var countdownheight='35px'
var countdownbgcolor='white'
var opentags='<font face="Trebuchet MS"><small>'
var closetags='</small></font>'
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
      if (document.layers)
            document.countdownnsmain.visibility="show"
      else if (document.all||document.getElementById)
            crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
      setcountdown()
      countdown()
}

if (document.all||document.getElementById)
      document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown

function countdown(){
      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[mo]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
      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 on day of occasion
      if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
            if (document.layers){
                  document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
                  document.countdownnsmain.document.countdownnssub.document.close()
            }
            else if (document.all||document.getElementById)
                  crosscount.innerHTML=opentags+message_on_occasion+closetags
            return
      }
      //if passed day of occasion
      else if (dday<=-1){
            if (document.layers){
                  document.countdownnsmain.document.countdownnssub.document.write(opentags+"Event already passed! "+closetags)
                  document.countdownnsmain.document.countdownnssub.document.close()
            }
            else if (document.all||document.getElementById)
                  crosscount.innerHTML=opentags+"Event already passed! "+closetags
            return
      }
      //else, if not yet
      else{
            if (document.layers){
                  document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left till "+occasion+closetags)
                  document.countdownnsmain.document.countdownnssub.document.close()
            }
            else if (document.all||document.getElementById)
                  crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left to "+occasion+closetags
      }
      setTimeout("countdown()",1000)
}
</script>
</head>
<body>
<form name="the_form">
<select name="the_year">
<option value="2005">2005</option>
<option value="2004" selected>2004</option>
<option value="2003">2003</option>
</select>
<select name="the_month">
<option value="0">January</option>
<option value="1" selected>February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="the_date">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">4</option>
</select>
<input type="button" value="Start Countdown" onclick="setcountdown();">
</form>
<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>
</body>
</html>




P.S.  This code can probably be cleaned up quite a bit.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 12321057
thank you for the code, ill try it when i get home...

get bk to you tomorrow..#

p.s - i didnt write the code, my university pal did...

anyways cheers

sean
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now