Solved

User Input To Countdown Timer 500 points

Posted on 2004-10-15
8
293 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 16

Author Comment

by:ellandrd
ID: 12319677
what if my form is on another page? will it still work??
0
 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JS does not refresh 6 30
key press alert 2 32
check a checkbox of a checkboxes group in bootstrap 2 42
Explain this javascript function to me 2 26
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

828 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