倒计时 CSS 视觉格式

Question

我正在尝试匹配下图中的格式。

这是我现在拥有的代码：https://codepen.io/Brite1/pen/wvPrggj（看起来我只需要添加间距并将所有数字/文本居中）。我不确定如何添加间距以及如何正确居中所有文本和数字。请帮忙，谢谢！

    body {
  align-items: center;
  background-color: transparent;
  display: flex;
}


.container {
  color: transparent;
  margin: 0 auto;
  text-align: center;
}

.circle-time{
      color: #FE7030;
    font-size: 60px;
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-weight: bold; 
  text-align: center;

}

.timer-font{
      font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #027B46;
    font-size: 25px;

}

Answer 1

使用包装器并从主体中移除 flex。从 body 中删除 flex 属性后，将其添加到 wrapper 中，然后使用 text-align 使文本居中。

function getNextDayOfWeek(date, dayOfWeek, hour) {
  var resultDate = new Date(date.getTime());
  resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
  resultDate.setHours(hour, 0, 0, 0);
  return resultDate;
}

var countDownDate = getNextDayOfWeek(new Date(), 5, 15);

// 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)).toString();
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
  var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();

  // Display the result in the element with id="timer"
  document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
  document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
  document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
  document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "Drawing Winners...";
  }
}, 1000);

* {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: transparent;
}

.wrapper {
  display: flex;
  gap: 10%;
  align-items: center;
  justify-content: center;
}

.container {
  color: transparent;
  margin: 0 auto;
  text-align: center;
}

.circle-time {
  color: #FE7030;
  font-size: 60px;
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

.timer-font {
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #027B46;
  font-size: 25px;
}

span {
  text-align: center;
}

<div class="wrapper">
  <span style="margin-right: 20px;">
          <span id="circle-days" class="circle-time"></span>
  </span>
  <span style="margin-right: 20px;">
          <span id="circle-hours" class="circle-time"></span>
  </span>
  <span style="margin-right: 20px;">
          <span id="circle-minutes" class="circle-time"></span>
  </span>
  <span id="circle-seconds" class="circle-time"></span> <span id="timer"></span>
</div>

Answer 2

您可以使用弹性容器，并将元素设置为与flex: 1 0 150px 相同的大小，即flex-grow: 1、flex-shrink: 0、flex-basis: 150px。你可以使用你喜欢的宽度，但你会明白的。

function getNextDayOfWeek(date, dayOfWeek, hour) {
  var resultDate = new Date(date.getTime());
  resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
  resultDate.setHours(hour, 0, 0, 0);
  return resultDate;
}

var countDownDate = getNextDayOfWeek(new Date(), 5, 15);

// 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)).toString();
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
  var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();

  // Display the result in the element with id="timer"
  document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
  document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
  document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
  document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "Drawing Winners...";
  }
}, 1000);

body {
  align-items: center;
  background-color: transparent;
  display: flex;
}

.flex-wrapper {
  display: flex;
  min-width: 600px;
}

.flex-wrapper>span {
  flex: 1 0 150px;
}

.container {
  color: transparent;
  margin: 0 auto;
  text-align: center;
}

.circle-time {
  color: #FE7030;
  font-size: 60px;
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

.timer-font {
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #027B46;
  font-size: 25px;
}

<div class="flex-wrapper">
  <span id="circle-days" class="circle-time">00</span>
  <span id="circle-hours" class="circle-time">00</span>
  <span id="circle-minutes" class="circle-time">00</span>
  <span id="circle-seconds" class="circle-time">00</span>
  <span id="timer"></span>
</div>

查看实时示例here。