Solved

User Input To Countdown Timer 500 points

Posted on 2004-10-15
8
285 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
Comment Utility

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
Comment Utility
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
Comment Utility
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
Comment Utility
what if my form is on another page? will it still work??
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
?

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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

772 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

11 Experts available now in Live!

Get 1:1 Help Now