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
精彩评论