#javascript #width #countdown
#javascript #ширина #обратный отсчет
Вопрос:
Я работаю над этим обратным отсчетом:http://apps.facebook.com/tjdcountdown /
Я хотел бы добавить определенную ширину для каждого результата (минут, часов, дней) моего обратного отсчета, чтобы число всегда идеально совпадало с текстом ниже.
Возможно ли создать переменную для каждого результата и вызвать их позже в моем HTML-коде?
Вот скрипт для обратного отсчета:
<script type="text/javascript">
var 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>
Большое спасибо за помощь!
Комментарии:
1. 1 для
//kill the milliseconds
Ответ №1:
Да, вы можете все это сделать. Поместите каждое число внутри своего собственного div и расположите текст по центру внутри каждого div. Для обеспечения центрирования текста не должно требоваться никакого кодирования.
Основная проблема сейчас заключается в том, что все числа (годы, недели, дни, часы и т.д.) втиснуты в один div (iid, он же ‘countbox1’), Когда их нужно разделить на их собственные div.
Ответ №2:
Я бы определил длину числа, а затем использовал эту длину для определения соответствующей ширины. Динамически выделять память нехорошо (по крайней мере, на мой взгляд). Чтобы определить длину, я уверен, что есть лучшие способы JS сделать это, но простым способом было бы продолжать делить на 10, пока значение не станет меньше 1, и подсчитывать количество раз, когда значение было разделено.
while(flag){
i ;
res = res/10
if(res<1)
flag=false;
}
// i would be your length
// should make this into a function prob