使用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中的文本

回答

相关问题