將標題與Javascript倒計時器中的每個數字對齊

Question

如何在每天，每小時，每分鍾，每小時對齊每個跨度？ 目前只是在文本中添加填充，但它沒有與它的相應數字對齊。 當任何數字列變為單個數字時，它會移動數字。

筆： https ： //codepen.io/zepzia/pen/MmoVJm

 // Set the date we're counting down to var countDownDate = new Date("Oct 7, 2017 12:00:00").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("countdown").innerHTML = days + " " + hours + " " + minutes + " " + seconds + " "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "EXPIRED"; } }, 1000); 

 body { background: url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG); background-size: cover; background-position: center center; background-attachment: fixed; } .countdown-wrapper { position: relative; height: 400px; } #countdown, #countdown-text { font-family: 'Roboto', sans-serif; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #countdown { font-weight: 900; font-size: 142px; color: #fff; opacity: .7; letter-spacing: -4px; } #countdown-text { font-weight: 900; font-size: 40px; color: black; opacity: .8; } .counter-text { padding: 20px; } 

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet"> <div class="countdown-wrapper"> <div id="countdown"></div> <div id="countdown-text"> <span class="counter-text">DAYS</span> <span class="counter-text">HOURS</span> <span class="counter-text">MINS</span> <span class="counter-text">SECS</span> </div> </div> 

Answer 1

而不是將您的倒計時數字動態更新為單個div，而是創建一個單獨的div，分別為天，小時，分鍾和秒。

<div class="countdown-wrapper">
    <div class="countdown-chunk">
        <div class="counter-value" id="daysValue"></div>
        <div class="counter-label">DAYS</div>
    </div>
    <div class="countdown-chunk">
        <div class="counter-value" id="hoursValue"></div>
        <div class="counter-label">HOURS</div>
    </div>
    <div class="countdown-chunk">
        <div class="counter-value" id="minutesValue"></div>
        <div class="counter-label">MINUTES</div>
    </div>
    <div class="countdown-chunk">
        <div class="counter-value" id="secondsValue"></div>
        <div class="counter-label">SECONDS</div>
    </div>
</div>

現在，您將每個倒計時塊與flexbox對齊，並確保將text-align：center添加到倒計時塊中。 您可以獨立設置計數器值和反標簽的樣式。

.countdown-chunk {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.countdown-wrapper {
    flex: 1 1 50%;
    text-align: center;
}

您還有4個要更新的元素而不是僅僅一個，但與嘗試對齊脫節元素相比，這很容易。

Answer 2

請試試這個

        .row {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: row;
           flex-direction: row;
        }

        .column {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: column;
           flex-direction: column;
        }


        <div class="row"> 
            <div class="column">
              <div class="counter-text" id="days"></div>
              <div class="counter-text" id="hours"></div>
              <div class="counter-text" id="minutes"></div>
              <div class="counter-text" id="secs"></div>
            </div>
            <div class="column">
              <div class="counter-text">DAYS</div>
              <div class="counter-text">HOURS</div>
              <div class="counter-text">MINUTES</div>
              <div class="counter-text">SECS</div>
            </div>
        </div>
        //javascript
         document.getElementById("days").innerHTML = days ;
         document.getElementById("hours").innerHTML = hours ;
         document.getElementById("minutes").innerHTML = minutes ;
         document.getElementById("secs").innerHTML = secs ;

Answer 3

您需要稍微重構HTML，以便數字和標簽位於相同的包含元素中。 這可以讓你在它們周圍放一個“盒子”，這樣它們總是排成一行。 這是一種方法：

 // Set the date we're counting down to var countDownDate = new Date("Oct 7, 2017 12:00:00").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("counter-days").innerHTML = days; document.getElementById("counter-hours").innerHTML = hours; document.getElementById("counter-mins").innerHTML = minutes; document.getElementById("counter-secs").innerHTML = seconds; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "EXPIRED"; } }, 1000); 

 body { background: url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG); background-size: cover; background-position: center center; background-attachment: fixed; } .countdown-wrapper { position: relative; height: 400px; } #countdown { font-family: 'Roboto', sans-serif; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #countdown > div { float: left; padding: 20px; } .counter-num { font-weight: 900; font-size: 142px; color: #fff; opacity: .7; letter-spacing: -4px; } .counter-text { display: block; clear: both; font-weight: 900; font-size: 40px; color: black; opacity: .8; } 

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet"> <div class="countdown-wrapper"> <div id="countdown"> <div id="countdown-days"> <span class="counter-num" id="counter-days"></span> <span class="counter-text">DAYS</span> </div> <div id="countdown-hours"> <span class="counter-num" id="counter-hours"></span> <span class="counter-text">HOURS</span> </div> <div id="countdown-mins"> <span class="counter-num" id="counter-mins"></span> <span class="counter-text">MINS</span> </div> <div id="countdown-secs"> <span class="counter-num" id="counter-secs"></span> <span class="counter-text">SECS</span> </div> </div> </div> 

Answer 4

我做過類似於TxRegex的回答 。 我重新構建了你的html，對你的css進行了一些調整，並在你的javascript中我已經替換了：

document.getElementById("countdown").innerHTML = days + " " + hours + " " +
minutes + " " + seconds + " ";

有：

document.getElementById("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;

將它們放在新創建的div中。

這是更新的Codepen 。