Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

User Input To Countdown Timer 500 points

Posted on 2004-10-15
8
Medium Priority
?
307 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

618 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