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

Question

我希望为 JavaScript 函数中的某些文本设置不同的 CSS 样式。例如，将图像中建议的样式设置为附加代码。一些忠告？// Set the date we're counting down tovar nowDate = new Date();var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0);// Update the count down every 1 secondvar 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

您可以在您的时间输出周围使用带有 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

Answer 2

这就是你要找的吗？我不确定为什么计时器没有按预期工作，没有过多地通过计时器代码。但我所做的是在段落标签中创建 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>

展开片段这就是你要找的吗？我不确定为什么计时器没有按预期工作，没有过多地通过计时器代码。但我所做的是在段落标签中创建 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 3

您可以使用任何元素，例如p或span什至h1等。唯一重要的是为您在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>