Установите CSS в текст в функции JavaScript

Question

I sh для установки другого стиля CSS для определенных текстов в функции JavaScript.

Например, установите стили, предложенные на изображении, к прикрепленному коду. Несколько советов?

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

Answer 1

Эй, это то, что вы ищете? Я не уверен, почему таймер работает не так, как ожидалось, go не слишком часто перебирал код таймера. Но я создал 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>

Answer 2

Вы можете использовать любой элемент, например p или span или даже h1 et c. единственное, что имеет значение, это предоставить цвет для элемента, который вы выбрали в css.

. Я использовал p в качестве примера, и мои друзья тоже поделились другим примером. не стесняйтесь выбирать любой.

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

.changeColor {
  color: red;
  /* change the color as you desire */
}

<p id="shipping-countdown"></p>

Answer 3

Вы можете просто использовать диапазон с классом CSS для вывода вашего времени:

например:

document.getElementById("shipping-countdown").innerHTML = "Order within <span class='time'>" +  minutes + "m "  + seconds + "s </span>" + "to have your order shipped on ";

Вот рабочий пример: https://codepen.io/ron7/pen/oNXKPrg