使用Javascript获取工作日&突出显示HTML中的文本

Using Javascript to get weekday & highlight text in HTML

本文关键字：显示 HTML 文本 获取 Javascript 工作日 amp 使用      更新时间：2023-09-26

我试图突出显示一周中的当前一天span，以了解商店的营业时间。

这是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>

谢谢！

如果你要做很多约会时间的事情，我会推荐Moment。然后你可以很容易地完成以下操作：

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

当然，你必须为高亮显示做css，并将其附加到类中。

我稍微改变了你的li的结构，这样我就更容易单独突出显示每一天。我正在使用一些jquery来解决这个问题。

我的代码将检查日期编号（其中sunday是0，saturday是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>

香草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;

啊，您需要突出显示当前日期。刚刚看到你的更新。我认为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
相关文章：