javascript - 在 JavaScript 函数中将 CSS 设置为文本

Question

我希望为 JavaScript 函数中的某些文本设置不同的 CSS 样式。

例如，将图像中建议的样式设置为附加代码。一些忠告？

// Set the date we're counting down to
var nowDate = new Date();
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0);

// 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 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"
  if (hours >= 1) {
    document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " +
      minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment;
  } else if (hours < 1 && minutes < 1) {
    document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s " +
      "to have your order shipped on " // date of shipment;
  } else {
    document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m " +
      seconds + "s " + "to have your order shipped on " // date of shipment;
  }
})

<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>

标签： javascripthtmlcss

Answer 1

嘿，这就是你要找的吗？我不确定为什么计时器没有按预期工作，没有过多地通过计时器代码。但我所做的是在段落标签中创建 2 个跨度以添加倒数计时器和日期。我使用附加的 css 为文本着色。

编辑：添加了 1.5 小时计时器

// Set the date we're counting down to
var nowDate = new Date();
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), nowDate.getHours()+1, nowDate.getMinutes()+30, 0, 0);

console.log(countDownDate);

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();
  var date = new Date(Date.now()).toLocaleString();
  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for 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"
  if (hours >= 1) {
    document.getElementById("countdown").innerText = hours + "h " +
      minutes + "m " + seconds + "s "; 
  } else if (hours < 1 && minutes < 1) {
    document.getElementById("countdown").innerText = seconds + "s ";
  } else {
    document.getElementById("countdown").innerText = minutes + "m " +
      seconds + "s "
  }
  datearray = date.split(',');
  document.getElementById("date-holder").innerText = datearray[0];
})

#countdown{
  color:green;
}
#date-holder{
  color:red;
}

<!-- Display the countdown timer in an element -->
<p id="shipping-countdown">Order within <span id="countdown"></span>to have your order shipped on <span id="date-holder"></span></p>