亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在 JavaScript 函數中將 CSS 設置為文本

在 JavaScript 函數中將 CSS 設置為文本

UYOU 2022-06-16 15:42:13
我希望為 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>
查看完整描述

3 回答

?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

您可以在您的時間輸出周圍使用帶有 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


查看完整回答
反對 回復 2022-06-16
?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

這就是你要找的嗎？我不確定為什么計時器沒有按預期工作，沒有過多地通過計時器代碼。但我所做的是在段落標簽中創建 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>


查看完整回答
反對 回復 2022-06-16
?
幕布斯6054654

TA貢獻1876條經驗 獲得超7個贊

您可以使用任何元素，例如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>


查看完整回答
反對 回復 2022-06-16
  • 3 回答
  • 0 關注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號