使用Javascript獲取星期幾＆突出顯示HTML中的文本

我試圖突出顯示當天的商店開放時間span。使用Javascript獲取星期幾＆突出顯示HTML中的文本

這裏的HTML：

<ul> 
    <li> 
     <span class="weekday" id="monday">Mo&nbsp&nbsp</span>8:00 - 12:00, 14:30 - 17:00 
    </li> 
    <li> 
     <span class="weekday" id="tuesday">Di, </span><span class="weekday" id="thursday">Do&nbsp&nbsp</span>8:00 - 12:00, 15:30 - 19:00 
    </li> 
    <li> 
     <span class="weekday" id="wednesday">Mi,</span> <span class="weekday" id="friday">Fr&nbsp&nbsp</span>8:00 - 13:00 
    </li>

謝謝！

來源

2015-12-23 sugadaddy

你說的「亮點」是什麼意思？ – www139

啊你需要當天突出顯示。剛看到你的更新。我不認爲html會高效。您可以通過以下任何一種方式來完成。希望能幫助到你。

JS只有：

var now = new Date(); 
    var days = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday']; 

    var today = days[ now.getDay() ]; 
    document.getElementById(today).style.background = '#FFFF00';

使用CSS，JS & jQuery的：

創建具有突出顯示顏色的類。

.highlight 
    { 
     background-color:#FFFF00; 
    }

在文檔準備中，您可以找到當前日期並使用ID將此類指定給特定的跨度。

var now = new Date(); 
    var days = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday']; 


    var today = days[ now.getDay() ]; //code to assign todays day to variable 
    $("#"+today).addClass("highlight"); //Jquery

來源

2015-12-23 00:46:06 pratikpawar

真的嗎？每天編輯HTML文件是一個好主意嗎？ – Abdel

@ 5parc Ofcourse not。 OP更新當天的問題。在一週的所有日子之前。因此提供了2種不同的方式 – pratikpawar

對不起，編輯我的問題澄清 - – sugadaddy

我會建議Moment如果你打算做了很多的日期時間的東西。然後，你可以很容易地做到以下幾點：

var today = moment().format('dddd'); // Tuesday 
today = today.toLowerCase(); 
var day_ele = document.getElementById(today); 
day_ele.className += " highlight";

你必須做的CSS爲高亮和其附加到類課程。

來源

2015-12-23 00:48:25

我改變了你的李的結構有點讓我更容易分開突出每一天。我正在使用一些jQuery來解決這個問題。

我的代碼將檢查日期編號（星期日爲0，星期六爲6）並且將在相應的日期範圍內添加一個類。

var today = new Date().getDay(); 
 

 
$("#" + today).addClass("highlight");

.highlight{ 
 
    background:#FFFF00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <span class="weekday" id="1">Mo </span> 
 
    </li> 
 
    <li> 
 
     <span class="weekday" id="2">Di </span> 
 
    </li> 
 
    <li> 
 
     <span class="weekday" id="3">Do </span> 
 
    </li> 
 
    <li> 
 
     <span class="weekday" id="4">Mi </span> 
 
    </li> 
 
    <li> 
 
     <span class="weekday" id="5">Fr </span> 
 
    </li> 
 
</ul>

來源

2015-12-23 01:03:11 Abdel

這些都是無效的HTML ID。 –

我知道他們是無效的ID，我要指出，它不建議/無效使用數字作爲ID，但我試圖保持我的解決方案簡單。我也相信星期天是0如果你'新日期（）。getDay（）' – Abdel

我編輯我的評論。我顯然忘了如何計算。大聲笑 –

香草JavaScript解決方案：

function highlightCurrentWeekday() { 
    var weekdays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']; 
    var currentWeekday = weekdays[new Date().getDay()]; 
    var span = document.getElementById(currentWeekday); 
    span.classList.add('highlight'); 
} 

window.onload = highlightCurrentWeekday;

來源

2015-12-23 01:09:51

使用Javascript獲取星期幾＆突出顯示HTML中的文本

回答

相關問題