2014-02-05 34 views
1

我編寫了此javascript倒計時,但div存在問題。我怎樣才能讓我的股票換成新的股票呢?當我說新的生產線,我認爲現在我的左時間格式化這樣的:在新行中放置div

5小時:21分鐘:3sec0h:56min:4秒

但我怎麼能格式化這樣?每一次都是新的。

5小時:21分鐘:3秒

0H:56min:4秒

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
</head> 
<body> 
<script> 
var d = new Date(); 
var n = d.getDay(); 
if(n == 1 || 2 || 3 || 4 || 5){ 
var timer1; 
function cdtd1() { 
    var sad1 = new Date(); 
    var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),23,30,00); 
    var timeDiff1 = dolazak1.getTime() - sad1.getTime(); 
    if (timeDiff1 <= 0) { 
     clearInterval(timer1); 
       document.getElementById(id).innerHTML = ''; 
    } 
    var sekunde1 = Math.floor(timeDiff1/1000); 
    var minute1 = Math.floor(sekunde1/60); 
    var sati1 = Math.floor(minute1/60); 
    var dani1 = Math.floor(sati1/24); 
    sati1 %= 24; 
    minute1 %= 60; 
    sekunde1 %= 60; 

    $("#dani1Box").html(dani1); 
    $("#sati1Box").html(sati1 + ':'); 
    $("#minute1Box").html(minute1 + ':'); 
    $("#sekunde1Box").html(sekunde1); 

    timer1 = setTimeout(cdtd1, 1000); 
} 

$(document).ready(function() { 
    cdtd1(); 
}); 

var timer2; 
function cdtd2() { 
    var sad2 = new Date(); 
    var dolazak2 = new Date(sad2.getFullYear(),sad2.getMonth(),sad2.getDate(),24,00,00); 
    var timeDiff2 = dolazak2.getTime() - sad2.getTime(); 
    if (timeDiff2 <= 0) { 
     clearInterval(timer2); 
       document.getElementById(id).innerHTML = ''; 
    } 
    var sekunde2 = Math.floor(timeDiff2/1000); 
    var minute2 = Math.floor(sekunde2/60); 
    var sati2 = Math.floor(minute2/60); 
    var dani2 = Math.floor(sati2/24); 
    sati2 %= 24; 
    minute2 %= 60; 
    sekunde2 %= 60; 
    $("#dani2Box").html(dani2); 
    $("#sati2Box").html(sati2 + ':'); 
    $("#minute2Box").html(minute2 + ':'); 
    $("#sekunde2Box").html(sekunde2); 

    timer2 = setTimeout(cdtd2, 1000); 
} 

$(document).ready(function() { 
    cdtd2(); 
}); 
} 
</script> 





<style type="text/css"> 
#dani1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

#sati1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 


#minute1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 



#sekunde1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

#dani2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

#sati2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 


#minute2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 



#sekunde2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

h1{font-size:70px; 
    color:#1f62a7; 
    font-family:Sans-serif; 
    display: inline-block; 
} 

</style> 
    <center> 
    <div id="sati1Box">></div> 

    <div id="minute1Box"></div> 

    <div id="sekunde1Box"></div> 
    </div> 


    <h1> </h1> 

    <div id="sati2Box"></div> 

    <div id="minute2Box"></div> 

    <div id="sekunde2Box"></div> 
    </div> 

    </center> 
</body> 

回答

2

的div去默認情況下,新的生產線。你迫使他們不要通過添加display: inline-block;來做到這一點。

您可能想要將您的元素包裝在div中,該元素默認爲display: block,然後將您的各個div保留爲inline-block。這樣的事情:

<div> 
    <div id="sati1Box"></div> 
    <div id="minute1Box"></div> 
    <div id="sekunde1Box"></div> 
</div> 
<div> 
    <div id="sati2Box"></div> 
    <div id="minute2Box"></div> 
    <div id="sekunde2Box"></div> 
</div> 
+0

謝謝,它工作:) – user3238555