Discussion:
The time until something is due is always important. There are a lot of countdown timers which are available. There are a lot of interesting ways to implement a countdown timer. In restricted IT environments, where installing applications is frowned upon, one approach to creating a lightweight application is using HTML Applications (HTA). The following example shows how to use an HTA to build a standalone countdown timer which is displayed as a window.
Several techniques are used to make this countdown timer work. First, the name of the file is parsed to determine the target date and time. This way, the remaining time can be set by renaming the file. Next, javascript is used to rewrite a portion of the document by assigning a value to the ‘innerHTML’ of div element. Then, the countdown function is called once when the body of the document is loaded. However, once the function is called, the last thing it does is reschedule itself to run again in 1 second. Finally, this file, which looks like an HTML file is saved as with the extension HTA.
Code Example:
<html> <head> <TITLE>Countdown Timer</TITLE> <HTA:APPLICATION ID="oMyApp" APPLICATIONNAME="CountDownTimer" BORDER="yes" CAPTION="yes" SHOWINTASKBAR="yes" SINGLEINSTANCE="yes" SYSMENU="yes" WINDOWSTATE="normal" MAXIMIZEBUTTON="no"> <script> // set the window size and place it on the screen in the upper right hand corner var windowWidth = 600 var windowHeight = 150 window.resizeTo(600,150); // Can only be done in HTA //half the screen height minus half the new window height (plus title and status bars). iMyHeight = (window.screen.height/4) - (windowHeight/2 + 50)/2; window.moveTo(window.screen.width-windowWidth-5,5); </script> <style type="text/css"> body { background-color: green; color: black; text-align: center; font-family: arial; font-weight: bold; font-size: 20px; font-variant: small-caps; border: medium double rgb(0,255,15); width:100%; overflow: hidden; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#00C000', startColorstr='#00FFFF', gradientType='0'); } </style> </head> <body> <!-- Define a division for displaying the countdown message --> <div id="countdown" ></div> <!-- Define the actions to take when the body loads --> <script> // parse the filename to get the target date and time var filename = String(window.location) // get filename var iSubStrEnd = filename.lastIndexOf('.') // get point in string where the date data may end var iSubStrStart = filename.lastIndexOf('.',iSubStrEnd-1) // get point in string where the date data may start if ((iSubStrEnd>0)&&(iSubStrStart>0)&&(iSubStrStart<iSubStrEnd)) { // get the date string from the file name endDateTime = filename.slice(iSubStrStart+1,iSubStrEnd) } else { // enter the stop date here that will be used if the name is not formatted correctly // format for this string is YYYY,MM,DD,HH,MM,SS endDateTime = '2015,01,01,0,0,0' } // parse the date var params = endDateTime.split(',') lyear = parseInt(params[0]) lmonth = parseInt(params[1]) lday = parseInt(params[2]) // call the countdown function which will hook itself into a timer and // continue to run every second. countdown(lyear,lmonth,lday,params[3],params[4],params[5]) //------------------------------------------------------- function countdown(yr,m,d,hh,mm,ss){ var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") hh = ("00"+hh).slice(-2); mm = ("00"+mm).slice(-2); //if (mm<10) mm = "0"+(mm+1); ss = ("00"+ss).slice(-2); //if (ss<10) ss = "0"+ss; theyear=yr; themonth=m; theday=d; thehh=parseInt(hh); themm=parseInt(mm); thess=parseInt(ss); var today=new Date(); var todayy=today.getFullYear(); var todaym=today.getMonth()+1; 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[m-1] +" "+d +", "+yr +" "+hh +":"+mm +":"+ss var dd = Date.parse(futurestring)-Date.parse(todaystring); var dday = Math.floor(dd/(60*60*1000*24)*1); var dhour = Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); var dmin = Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); var dsec = Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){ // put text in the "countdown" division to show the countdown expired document.getElementById("countdown").innerHTML = "<br> Time has run out! <br>"; return; } else { dhour = ("00"+dhour).slice(-2); dmin = ("00"+dmin).slice(-2); dsec = ("00"+dsec).slice(-2); // format the delta time and put in the countdown division to display document.getElementById("countdown").innerHTML = "<br> Times out in "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+ " seconds <br>"; } // trigger this routine to run again in 1 second setTimeout("countdown(theyear,themonth,theday,thehh,themm,thess)",1000); } </script> </body> </html>
TEsting Environment:
- IE9
- Win7
No comments:
Post a Comment