将标题与Javascript倒计时器中的每个数字对齐

时间：2017-05-02 19:09:19

标签： javascript css

如何在每天，每小时，每分钟，每小时对齐每个跨度？目前只是在文本中添加填充，但它没有与其相应的编号对齐。当任何数字列变为单个数字时，它会移动数字。

笔：https://codepen.io/zepzia/pen/MmoVJm

＆＃13;
＆＃13; 
// 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);
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：4)

不是将倒计时数字动态更新为单个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个要更新的元素而不只是一个，但与尝试对齐脱节元素相比，这很容易。

答案 1 :(得分：1)

请试试这个

        .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 ;

答案 2 :(得分：1)

您需要稍微重构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>

答案 3 :(得分：1)

我做过与TxRegex's answer类似的事情。我重新组织了你的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中。

这是updated Codepen。

相关问题
最新问题