Saturday, March 17, 2012

Yet Another Countdown Timer Application built using .HTA (Windows HTml Applications)



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:

	<TITLE>Countdown Timer</TITLE>
		// 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;
	<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);
			overflow: hidden;
						startColorstr='#00FFFF', gradientType='0'); 			
	<!-- Define a division for displaying the countdown message -->
	<div id="countdown" ></div>
	<!-- Define the actions to take when the body loads -->
	// 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.

	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);
			// put text in the "countdown" division to show the countdown expired
			document.getElementById("countdown").innerHTML = "<br> Time has run out! <br>";
		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



TEsting Environment:

  • IE9
  • Win7
This work is licensed under a Creative Commons Attribution By license.

No comments:

Post a Comment