制作JavaScript倒数计时器

Question

我正在制作一个倒数计时器，其中“天时分秒”的文本刚好低于其各自的值。同样，它也必须响应。我下面有一些代码：

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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 and 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("timer").innerHTML = "<h1>" + days + " <span> days </span>: " + hours + "    <span>hours</span>: " + minutes + " <span>minutes </span>: <font color='red'>" + seconds + "<span> s</span></font> </h1>";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);

    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

<div align="center" id="timer"></div>

在日期符号D在“日期”值的左侧但我希望它在右侧的情况下，我的代码有问题。我的意思是就像

下的图片一样

Answer 1

您可以将文本换成<div>以创建换行符。其次，创建一个以text，value和color作为参数的函数，并返回html字符串。

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

function timePart(val,text,color="black"){
  return `<h1 class="timer" style="color:${color};">${val}<div>${text}</div></h1>`
}

// 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 and 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"

 let res = timePart(days,'days') + timePart(hours,'hours') + timePart(minutes,'Mins')  + timePart(seconds,'Seconds','red');
document.getElementById("timer").innerHTML = res

  // If the count down is finished, write some text 
 if (distance < 0) {
    clearInterval(x);

document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

.timer{
  display:inline-block;
  padding:10px;
}

<div align="center" id="timer"></div>

Answer 2

好的，所以我根据您的要求进行了修复。它与图片不完全一样，但是我敢肯定您可以做一些造型。这是实际的代码片段。

var countDownDate = new Date("Jan 5, 2021 15:37:25").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 and 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("dd").innerHTML = days
  document.getElementById("hh").innerHTML = hours
  document.getElementById("mm").innerHTML = minutes
  document.getElementById("ss").innerHTML = seconds

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);

    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

h1 span {
  margin: 0px 10px;
}

p span {
  margin: 0px 11px;
}

<div align="center">
  <h1>
    <span id="dd"></span>:
    <span id="hh"></span>:
    <span id="mm"></span>:
    <span style="color:red;" id="ss"></span>
  </h1>
  <p>
    <span>Days</span>
    <span>Hours</span>
    <span>Minutes</span>
    <span>Seconds</span>
  </p>
</div>