如何:在时间范围内执行JavaScript运行代码

Question

我有一个时间框架08:35-15:55，有9个背景我需要在这个时间框架内更改

我现在使用的代码来自这个问题的早期答案，有没有更简单的方法来做到这一点？

这段代码是针对星期一的，我在星期一到星期五重复这段代码。

另一个问题是，当我总是只想要一个背景改变时，有时会有两个背景改变。

例如: 11:00-11:05我有2个背景变成绿色，而我只想要1个

HTML代码是问题的基础。

javascriptSomeName.js

function test(){
var date=new Date();

if(date.getDay()== 1 && date.getHours() == 8  && date.getMinutes() >= 35 ){ 
    document.getElementById('Man1').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 9  && date.getMinutes() <= 20){
        document.getElementById('Man1').style.background = 'green';
}else{

        document.getElementById('Man1').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 9  && date.getMinutes() >= 20 ){ 
    document.getElementById('Man2').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 10  && date.getMinutes() <= 10){
        document.getElementById('Man2').style.background = 'green';
}else{

        document.getElementById('Man2').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 10  && date.getMinutes() >= 10 ){ 
    document.getElementById('Man3').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 11  && date.getMinutes() <= 5){
        document.getElementById('Man3').style.background = 'green';
}else{

        document.getElementById('Man3').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 11  && date.getMinutes() >= 5 ){ 
    document.getElementById('Man4').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 11  && date.getMinutes() <= 55){
        document.getElementById('Man4').style.background = 'green';
}else{

        document.getElementById('Man4').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 11  && date.getMinutes() >= 55 ){ 
    document.getElementById('Man5').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 12  && date.getMinutes() <= 40){
        document.getElementById('Man5').style.background = 'green';
}else{

        document.getElementById('Man5').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 12  && date.getMinutes() >= 40 ){ 
    document.getElementById('Man6').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 13  && date.getMinutes() <= 25){
        document.getElementById('Man6').style.background = 'green';
}else{

        document.getElementById('Man6').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 13  && date.getMinutes() >= 25 ){ 
    document.getElementById('Man7').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 14  && date.getMinutes() <= 15){
        document.getElementById('Man7').style.background = 'green';
}else{

        document.getElementById('Man7').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 14  && date.getMinutes() >= 15 ){ 
    document.getElementById('Man8').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 15  && date.getMinutes() <= 5){
        document.getElementById('Man8').style.background = 'green';
}else{

        document.getElementById('Man8').style.background = '';

}

if(date.getDay()== 1 && date.getHours() == 15  && date.getMinutes() >= 5 ){ 
    document.getElementById('Man9').style.background = 'green';
}else if(date.getDay()== 1 && date.getHours() == 15  && date.getMinutes() <= 55){
        document.getElementById('Man9').style.background = 'green';
}else{

        document.getElementById('Man9').style.background = '';

}  

somename.php

<table>
<tr>
<th>Tid</th>
<th>Mandag</th>
<th>Tirsdag</th>
<th>Onsdag</th>
<th>Torsdag</th>
<th>Fredag</th>
</tr>
<tr>
<td>08:35-09:20</td>
<td id="Man1">Norsk</td>
<td id="Tir1">Mediekommunikasjon</td>
<td id="Ons1">Naturfag</td>
<td id="Tor1">Mediekommunikasjon</td>
<td id="Fre1">Medieproduksjon</td>
</tr>
<tr>
<td>09:25-10:10</td>
<td id="Man2">Norsk</td>
<td id="Tir2">Mediekommunikasjon</td>
<td id="Ons2">Naturfag</td>
<td id="Tor2">Mediekommunikasjon</td>
<td id="Fre2">Medieproduksjon</td>
</tr>
<tr>
<td>10:20-11:05</td>
<td id="Man3">Engelsk</td>
<td id="Tir3">Engelsk</td>
<td id="Ons3">Matte</td>
<td id="Tor3">Mediekommunikasjon</td>
<td id="Fre3">Mediekommunikasjon</td>
</tr>
<tr>
<td>11:10-11:55</td>
<td id="Man4">Medie Produksjon</td>
<td id="Tir4">Engelsk</td>
<td id="Ons4">Matte</td>
<td id="Tor4">Prosjekt til fordypning</td>
<td id="Fre4">Mediekommunikasjon</td>
</tr>
<tr>
<td>11:55-12:40</td>
<td id="Man5">MAT</td>
<td id="Tir5">MAT</td>
<td id="Ons5">MAT</td>
<td id="Tor5">MAT</td>
<td id="Fre5">MAT</td>
</tr>
<tr>
<td>12:40-13:25</td>
<td id="Man6">Medie Produksjon</td>
<td id="Tir6">Gym</td>
<td id="Ons6">Matte</td>
<td id="Tor6">Prosjekt til fordypning</td>
<td id="Fre6">Mediedesign og medieuttrykk</td>
</tr>
<tr>
<td>13:30-14:15</td>
<td id="Man7">Medie Produksjon</td>
<td id="Tir7">Gym</td>
<td id="Ons7">Mediedesign og medieuttrykk</td>
<td id="Tor7">Prosjekt til fordypning</td>
<td id="Fre7">Mediedesign og medieuttrykk</td>
</tr>
<tr>
<td>14:20-15:05</td>
<td id="Man8">Medie Produksjon</td>
<td id="Tir8"></td>
<td id="Ons8">Mediedesign og medieuttrykk</td>
<td id="Tor8">Prosjekt til fordypning</td>
<td id="Fre8">Mediedesign og medieuttrykk</td>
</tr>
<tr>
<td>15:10-15:55</td>
<td id="Man9">Basistime</td>
<td id="Tir9"></td>
<td id="Ons9">Mediedesign og medieuttrykk</td>
<td id="Tor9">Prosjekt til fordypning</td>
<td id="Fre9"></td>
</tr>
</table>

Answer 1

您有三个选项：

1)查看用户每次访问网页的日期+小时

2)添加在下周一08:35到期的cookie如果该cookie已过期，则执行您的操作(后台更改)并重新创建cookie

3)将轮询间隔设置为1秒并检查时间，检查时间是否与周一8:35匹配(ty到shime)

更改背景的示例：

document.getElementsByTagName('td')[0].style.color = "#012345"

创建cookie的示例：

function createCookie(name, value) {
   var date = new Date();
   date.setTime(date.getTime()+(30*1000));
   var expires = "; expires="+date.toGMTString();

   document.cookie = name+"="+value+expires+"; path=/";
}

有关cookies的更多信息：http://www.w3schools.com/js/js_cookies.asp

Answer 2

在这里，我使用了每次用户访问的检查日期和时间

您可以使用setTimeout并设置执行代码的计时器

var today = new Date();

//Check Its monday
if (today.getDay() == 1) {

    //calculate milliseconds
    var millis = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8, 30, 0, 0) - today;

    //Check Time has not passed
    if (millis > 0) {
        setTimeout(function () {
            //Change color
            document.getElementsByTagName('td')[0].style.color = 'blue';
        }, millis);
    }
}

Answer 3

试试这样的东西

function test(){
    var date=new Date();
    if(date.getDay()==1 && date.getHours() >=8  && date.getMinutes() >=35 )
    { //8-9AM
        document.getElementsByTagName('td')[0].style.color = 'blue';
                    clearInterval(iId);
    }
    else if(date.getDay()==1 && date.getHours() == 9  && date.getMinutes() <= 20)
    {
        document.getElementsByTagName('td')[0].style.color = 'blue';
                    clearInterval(iId);
    }else
    {
      //nothing happens
    }
}

您还需要使用计时器。

var iId=setInterval(test,1000);