Blog
CountDown to date
8 years, 2 months ago Posted in: Blog Comments Off

Easter's present!
here's a little script to show the countdown to a specified date. feel free to use it, please send a comment showing where you use it.

Example implementation @ http://www.garminbarcelonatriathlon.com

Actionscript:
  1. package {
  2.     import flash.display.*;
  3.     import flash.events.*;
  4.     import flash.text.*;
  5.    
  6.     public class CountDown extends MovieClip{
  7.        
  8.         public var label_txt:TextField;
  9.         private var jahr : Number = 2009;
  10.         private var monat : Number = 10;
  11.         private var tag : Number = 18 ;
  12.         private var today : Date;
  13.         private var targetDate : Date;
  14.         private var baseColor : String = "#4E9EFB";
  15.         private var otherColor : String = "#F4C836";
  16.  
  17.  
  18.  
  19.         public function CountDown(){
  20.             super();
  21.             addEventListener(Event.ADDED_TO_STAGE,initialize);
  22.             addEventListener(Event.REMOVED_FROM_STAGE,dispose);
  23.         }
  24.        
  25.  
  26.  
  27.        
  28.        
  29.        
  30.         private function initialize(event:Event):void{
  31.            
  32.              // esperamos parametros desde el exterior en formato flashvars
  33.             jahr = (stage.loaderInfo.parameters["year"])?stage.loaderInfo.parameters["year"]:jahr;
  34.             monat = (stage.loaderInfo.parameters["month"])?stage.loaderInfo.parameters["month"]:monat;
  35.             tag = (stage.loaderInfo.parameters["day"])?stage.loaderInfo.parameters["day"]:tag;
  36.          baseColor = (stage.loaderInfo.parameters["baseColor"])?stage.loaderInfo.parameters["baseColor"]:baseColor;
  37.             otherColor = (stage.loaderInfo.parameters["otherColor"])?stage.loaderInfo.parameters["otherColor"] :o therColor;
  38.  
  39.             targetDate = new Date(jahr, monat - 1, tag, 0, 0, 0);
  40.             
  41.             addEventListener(Event.ENTER_FRAME, update,false,0,true);         
  42.         }
  43.        
  44.        
  45.        
  46.        
  47.        
  48.         /**
  49.          *
  50.          */
  51.         private function update(event : Event) : void {
  52.            
  53.             today = new Date();
  54.            
  55.             var days : Number = countdate(targetDate, today).days;
  56.             var hours : Number = countdate(targetDate, today).hours;
  57.             var minutes : Number = countdate(targetDate, today).minutes;
  58.             var seconds : Number = countdate(targetDate, today).seconds;           
  59.  
  60.             label_txt.htmlText = "<font color='" + baseColor + "'>" +"COUNTDOWN "+ formatValue(days) + " DAYS "+  formatValue(hours)  +" HOURS " + formatValue(minutes)  + " MINUTES "  + formatValue(seconds) +" SECONDS"+ "</font>" ;
  61.  
  62.         }
  63.  
  64.  
  65.  
  66.  
  67.  
  68.        
  69.         private function dispose(event:Event):void{
  70.             removeEventListener(Event.ENTER_FRAME, update);
  71.         }      
  72.        
  73.        
  74.        
  75.  
  76.         private function formatValue(inNumber : Number) : String {
  77.            return "<font color='" + otherColor + "'>" + inNumber.toString() + "</font>"
  78.         }
  79.  
  80.        
  81.        
  82.  
  83.         /**
  84.          *
  85.          *
  86.          */
  87.         private  function countdate(targetDate : Date, todayDate : Date) : Object {
  88.  
  89.             var res : Object = new Object();
  90.  
  91.             var _differ = targetDate.getTime() - todayDate.getTime();
  92.             var tmpms = _differ;
  93.             
  94.             var tmps = Math.floor(tmpms / 1000);
  95.             
  96.             tmpms = tmp % 1000;
  97.             
  98.             var tmpmin = Math.floor(tmps / 60);
  99.             tmps = tmps % 60;
  100.             
  101.             var tmphour = Math.floor(tmpmin / 60);
  102.             tmps = tmps % 60;
  103.  
  104.  
  105.             var tmpday = Math.floor(tmphour / 24);
  106.             tmphour = tmphour % 24;
  107.  
  108.             var tmpyr = Math.floor(tmpday / 400);
  109.             tmpday = tmpday % 400;
  110.             
  111.             
  112.             res.differencia = _differ;
  113.             res[0] = _differ;
  114.             res.years = tmpyr;
  115.             res[1] = tmpyr;
  116.             res.days = tmpday;
  117.             res[2] = tmpday;
  118.             res.hours = tmphour;
  119.             res[3] = tmphour;
  120.             res.minutes = tmpmin;
  121.             res[4] = tmpmin;
  122.             res.seconds = tmps;
  123.             res[5] = tmps;
  124.             res.milliseconds = tmpms;
  125.             res[6] = tmpms;
  126.             return res;
  127.         };
  128.        
  129.     }
  130. }

implementación HTML/ JAVASCRIPT

asumiendo que:

El swf se encuentre en:
http://www.thefestival.eu/swf/contador.swf

y exista

http://www.thefestival.eu/js/swfobject.js

copia este codigo entre las tags head

HTML:
  1. <script src="js/swfobject.js"></script>

copia este codigo en tu pagina donde quieras que aparezca el contador

HTML:
  1. <div id="flashContent3">
  2. Para ver este archivo necesita instalarse Flash Player en su navegador<br />Haga click <a href="http://get.adobe.com/es/flashplayer/" target="_blank">aqu&iacute;</a> para instalarlo.
  3. </div>
  4.  
  5. <script type="text/javascript">
  6.  
  7.    var swfFile = "swf/contador.swf";
  8.    var so = new SWFObject (swfFile, "flashobjeto", "282", "13", "8", "#000000", true);
  9.         so.useExpressInstall('expressinstall.swf');
  10.         so.setAttribute('xiRedirectUrl', document.location);
  11.         so.addParam("quality", "high");
  12.         so.addParam("scale", "noscale");
  13.     so.addParam("wmode", "transparent");
  14.     so.addVariable("year","2009"); // target year
  15.     so.addVariable("txt1","FALTAN");
  16.     so.addVariable("txt2","DIAS");
  17.     so.addVariable("txt3","HORAS");
  18.     so.addVariable("txt4","MINUTOS");
  19.     so.addVariable("txt5","SEGUNDOS");
  20.     so.addVariable("month","10"); // target month
  21.     so.addVariable("day","18"); // target day
  22.     so.addVariable("baseColor","#4E9EFB");
  23.     so.addVariable("otherColor","#F4C836");
  24.  
  25.         so.write("flashContent3");
  26.  
  27.      </script>
  28.  
  29. </div>

Comments are closed.

Image compression on this page is provided by WordPress Image Compressor