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

Answer 1

您可以在您的时间输出周围使用带有 CSS 类的跨度：喜欢：document.getElementById("shipping-countdown").innerHTML&nbsp;=&nbsp;"Order&nbsp;within&nbsp;<span&nbsp;class='time'>"&nbsp;+&nbsp;&nbsp;minutes&nbsp;+&nbsp;"m&nbsp;"&nbsp;&nbsp;+&nbsp;seconds&nbsp;+&nbsp;"s&nbsp;</span>"&nbsp;+&nbsp;"to&nbsp;have&nbsp;your&nbsp;order&nbsp;shipped&nbsp;on&nbsp;";这是一个工作示例：https ://codepen.io/ron7/pen/oNXKPrg

Answer 2

这就是你要找的吗？我不确定为什么计时器没有按预期工作，没有过多地通过计时器代码。但我所做的是在段落标签中创建 2 个跨度以添加倒数计时器和日期。我使用附加的 css 为文本着色。编辑：添加了 1.5 小时计时器// Set the date we're counting down tovar 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 secondvar x = setInterval(function() {&nbsp; // Get todays date and time&nbsp; var now = new Date().getTime();&nbsp; var date = new Date(Date.now()).toLocaleString();&nbsp; // Find the distance between now an the count down date&nbsp; var distance = countDownDate - now;&nbsp; // Time calculations for hours, minutes and seconds&nbsp; var days = Math.floor(distance / (1000 * 60 * 60 * 24));&nbsp; var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));&nbsp; var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));&nbsp; var seconds = Math.floor((distance % (1000 * 60)) / 1000);&nbsp; // Display the result in the element with id="demo"&nbsp; if (hours >= 1) {&nbsp; &nbsp; document.getElementById("countdown").innerText = hours + "h " +&nbsp; &nbsp; &nbsp; minutes + "m " + seconds + "s ";&nbsp;&nbsp; } else if (hours < 1 && minutes < 1) {&nbsp; &nbsp; document.getElementById("countdown").innerText = seconds + "s ";&nbsp; } else {&nbsp; &nbsp; document.getElementById("countdown").innerText = minutes + "m " +&nbsp; &nbsp; &nbsp; seconds + "s "&nbsp; }&nbsp; datearray = date.split(',');&nbsp; document.getElementById("date-holder").innerText = datearray[0];})#countdown{&nbsp; color:green;}#date-holder{&nbsp; 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 tovar 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 secondvar x = setInterval(function() {&nbsp; // Get todays date and time&nbsp; var now = new Date().getTime();&nbsp; var date = new Date(Date.now()).toLocaleString();&nbsp; // Find the distance between now an the count down date&nbsp; var distance = countDownDate - now;&nbsp; // Time calculations for hours, minutes and seconds&nbsp; var days = Math.floor(distance / (1000 * 60 * 60 * 24));&nbsp; var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));&nbsp; var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));&nbsp; var seconds = Math.floor((distance % (1000 * 60)) / 1000);&nbsp; // Display the result in the element with id="demo"&nbsp; if (hours >= 1) {&nbsp; &nbsp; document.getElementById("countdown").innerText = hours + "h " +&nbsp; &nbsp; &nbsp; minutes + "m " + seconds + "s ";&nbsp;&nbsp; } else if (hours < 1 && minutes < 1) {&nbsp; &nbsp; document.getElementById("countdown").innerText = seconds + "s ";&nbsp; } else {&nbsp; &nbsp; document.getElementById("countdown").innerText = minutes + "m " +&nbsp; &nbsp; &nbsp; seconds + "s "&nbsp; }&nbsp; datearray = date.split(',');&nbsp; document.getElementById("date-holder").innerText = datearray[0];})#countdown{&nbsp; color:green;}#date-holder{&nbsp; 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 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() {&nbsp; // Get todays date and time&nbsp; var now = new Date().getTime();&nbsp; // Find the distance between now an the count down date&nbsp; var distance = countDownDate - now;&nbsp; // Time calculations for hours, minutes and seconds&nbsp; var days = Math.floor(distance / (1000 * 60 * 60 * 24));&nbsp; var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));&nbsp; var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));&nbsp; var seconds = Math.floor((distance % (1000 * 60)) / 1000);&nbsp; // Display the result in the element with id="demo"&nbsp; if (hours >= 1) {&nbsp; &nbsp; 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&nbsp; } else if (hours < 1 && minutes < 1) {&nbsp; &nbsp; document.getElementById("shipping-countdown").innerHTML = "Order within <span class='changeColor'> " + seconds + "s </span>" + "to have your order shipped on " // date of shipment;&nbsp; } else {&nbsp; &nbsp; document.getElementById("shipping-countdown").innerHTML = "Order within <span class='changeColor'> " + minutes + "m " +&nbsp; &nbsp; &nbsp; seconds + "s </span>" + "to have your order shipped on " // date of shipment;&nbsp; }});.changeColor {&nbsp; color: red;&nbsp; /* change the color as you desire */}<p id="shipping-countdown"></p>