开发者

Need help aligning result of a Javascript's Countdown

I'm working on this countdown: http://apps.facebook.com/tjdcountdown/

I would like to add a specific width for each result (minutes,hours,days) of my countdown so the number are always perfectly align with the text below.

Is it possible to create a variable for each result and recall them later in my html code?

Here is the script for the countdown:

<script type="text/javascript">

va开发者_如何学JAVAr myMonth = "<?= $myMonth ?>";
var myDay = "<?= $myDay ?>";
var myYear = "<?= $myYear ?>";
var myHour = "<?= $myHour ?>";
var myMin = "<?= $myMin ?>";

dateFuture1 = new Date(2013,03,26,14,15,00);

function GetCount(ddate,iid){

    dateNow = new Date();   //grab current date
    amount = ddate.getTime() - dateNow.getTime();   //calc milliseconds between dates
    delete dateNow;

    // if time is already past
    if(amount < 0){
        document.getElementById(iid).innerHTML="I'm now married!";
    }
    // else date is still good
    else{
        years=0;weeks=0;days=0;hours=0;mins=0;secs=0;out="";

        amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

        years=Math.floor(amount/31536000);//years (no leapyear support)
        amount=amount%31536000;

        weeks=Math.floor(amount/604800);//weeks
        amount=amount%604800;

        days=Math.floor(amount/86400);//days
        amount=amount%86400;

        hours=Math.floor(amount/3600);//hours
        amount=amount%3600;

        mins=Math.floor(amount/60);//minutes
        amount=amount%60;

        secs=Math.floor(amount);//seconds

        out += years +""+((years==1)?"":"")+"";
        out += weeks +""+((weeks==1)?"":"")+"";
        if(days != 0){out += days +""+((days==1)?"":"")+"";}
        if(hours != 0){out += hours +""+((hours==1)?"":"")+"";}
        out += mins +""+((mins==1)?"":"")+"";
        out += secs +""+((secs==1)?"":"")+", ";
        out = out.substr(0,out.length-2);
        document.getElementById(iid).innerHTML=out;
        setTimeout(function(){GetCount(ddate,iid)}, 1000);
    }
}

window.onload=function(){
    GetCount(dateFuture1, 'countbox1');
    //you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
};
</script>

Thank a lot for helping!


Yes, you can do all that. Place each number inside its own div and and center the text inside each div. No coding should be required for making sure text is centered.

The main problem now is that all numbers (years, weeks, days, hours, etc) are squeezed into one div (iid aka 'countbox1') when they need to be separated out into their own divs.


I would determine length of the number and then use that length to determine the appropriate widths. Allocating memory dynamically is not good (at least in my opinion). To determine length I'm sure there are better JS ways to do this but a simple way would be to keep dividing by 10 until value is below 1 and count amount of times value was divided.

while(flag){
  i++;
  res = res/10
  if(res<1)
  flag=false;
}

// i would be your length
// should make this into a function prob 
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜