如何根据时间和日期更改href基础[关闭]答案

【问题标题】：how to change href bases on time and day [closed]如何根据时间和日期更改href基础[关闭]
【发布时间】：2022-01-18 18:45:43
【问题描述】：

我正在尝试创建一个时间线，根据当前时间将用户引导至各种事物。有一个链接会根据当前时间段改变其 href 值。一段持续 30 分钟，然后是 10 分钟的休息时间。午餐和早餐有额外的休息时间。根据日期和时间，有不同的时期。我尝试设置一个 30 分钟的间隔并声明一个工作日的周期数组。我还包含了一个 switch 语句来根据日期更改数组。我还每 30 分钟循环一次数组中的一项。然而，这并没有奏效。还有什么我可以做的吗？

这是我的代码：

var d = new Date(),
    day = d.getDay(),
    hours = d.getHours(),
    minutes = d.getMinutes(),
    days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
    ],
    ampm = "AM",
    live = document.getElementById("live"),
    time = (hours * 60) + minutes,
    period1 = ((8 * 60) + 15),
    period2 = ((9 * 60) + 0),
    snacktime = ((9 * 60) + 30),
    period3 = ((9 * 60) + 50),
    period4 = ((10 * 60) + 30),
    period5 = ((11 * 60) + 10),
    period6 = ((11 * 60) + 50),
    lunchtime = ((12 * 60) + 20),
    period7 = ((13 * 60) + 0),
    period8 = ((13 * 60) + 40),
    period9 = ((14 * 60) + 30),
    english = {
        link: "https://classroom.google.com/c/MzAxNTI0MjgzNjMy",
        period: "English"
    },
    hindi = {
        link: "https://classroom.google.com/c/MjkzOTAxNjY3NDU5",
        period: "Hindi"
    },
    math = {
        link: "https://classroom.google.com/c/MjkzOTAxNjY3NDU5",
        period: "Mathematics"
    },
    science = {
        link: "https://classroom.google.com/c/MjkzODk5NzI2MDc3",
        period: "Science"
    },
    social_studies = {
        link: "https://classroom.google.com/c/Mjk0MDk5NDkyNjMx",
        period: "Social Studies"
    },
    computers = {
        link: "https://classroom.google.com/u/0/c/MzQ1Nzc1NDYwMjg3",
        period: "Computer Science"
    },
    sanskrit = {
        link: "https://classroom.google.com/c/MzAxNDQwMjk0MzA5",
        period: "Sanskrit"
    },
    telegu = {
        link: "https://classroom.google.com/c/MjkzODk5NzI2MDc3",
        period: "Telegu"
    },
    art = {
        link: "https://classroom.google.com/u/0/c/Mjk3NTkzMzI0NzU1",
        period: "Art"
    },
    music = {
        link: "https://classroom.google.com/u/0/c/NDE1MTI0MzgwNjY5",
        period: "Music"
    },
    supw = {
        link: "https://classroom.google.com/u/0/c/Mjk0MDg4MDIyMTAz",
        period: "Socially Useful Productive Work (SUPW)"
    },
    martail_arts = {
        link: "https://classroom.google.com/u/0/c/Mjk4OTU4NjkxNzI1",
        period: "Martial Arts"
    },
    yoga = {
        link: "https://classroom.google.com/u/0/c/Mjk0NDU5MTQwNDUx",
        period: "Yoga"
    },
    dance = {
        link: "https://classroom.google.com/u/0/c/Mjk5MzY3NjYyMzEz",
        period: "Dance"
    },
    handicarft = {
        link: "https://classroom.google.com/u/0/c/MzYwNzYyODc1NTg1",
        period: "Handicraft"
    },
    assembly = {
        link: "https://classroom.google.com/c/MzAxNTI0MjgzNjMy",
        period: "Assembly"
    },
    snack = {
        link: "#",
        period: "Snack"
    },
    lunch = {
        link: "#",
        period: "Lunch"
    };
    var mon = [
        math,
        social_studies,
        snack,
        english,
        science,
        hindi,
        lunch,
        hindi,
        english,
        math,
    ],
    tues = [
        hindi,
        social_studies,
        snack,
        computers,
        martail_arts,
        english,
        lunch,
        telegu,
        science,
        math,
    ],
    wed = [
        dance,
        telegu,
        snack,
        english,
        yoga,
        science,
        lunch,
        math,
        social_studies,
        sanskrit
    ],
    thurs = [
        computers,
        music,
        english,
        snack,
        hindi,
        social_studies,
        science,
        lunch,
        sanskrit,
        assembly,
        handicarft
    ],
    fri = [
        telegu,
        hindi,
        snack,
        hindi,
        math,
        science,
        lunch,
        social_studies,
        english,
        math
    ],
    sat = [
        sanskrit,
        social_studies,
        snack,
        math,
        english,
        hindi,
        lunch,
        supw,
        science,
        art
    ]

day = days[day];
console.log(day);

setInterval(function() {
    var d = new Date(),
      day = d.getDay(),
      hours = d.getHours(),
      minutes = d.getMinutes(),
      days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      ampm = "AM";
      
    if (hours > 12) {
      hours -= 12 
      ampm = "PM"
    } else if (hours == 0) {
        hours = 12;
    }

    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    day = days[day];


    document.querySelector("label").innerHTML = day + ", " + hours + ":" + minutes + " " + ampm;
    console.log(document.querySelector("label").innerHTML);
}, 1000)

setInterval(function ()
    {
    switch (day)
    {
        case 1:
            switch (time)
            {
                case period1:
                    live.href = mon[0].link;
                break;
                
                case period2:
                    live.href = mon[1].link;
                break;
                
                case period3:
                    live.href = mon[2].link;
                break;
                
                case period4:
                    live.href = mon[3].link;
                break
    
                case period5:
                    live.href = mon[4].link;
                break;
                
                case period6:
                    live.href= mon[5].link;
                break;
    
                case period7:
                    live.href = mon[6].link;
                break;
    
                case period8:
                    live.href = mon[7].link;
                break
            }
        break;
        
        case 2:
            switch (time)
            {
                case period1:
                    live.href = tues[0].link;
                break;
                
                case period2:
                    live.href = tues[1].link;
                break;
                
                case period3:
                    live.href = tues[2].link;
                break;
                
                case period4:
                    live.href = tues[3].link;
                break
    
                case period5:
                    live.href = tues[4].link;
                break;
                
                case period6:
                    live.href= tues[5].link;
                break;
    
                case period7:
                    live.href = tues[6].link;
                break;
    
                case period8:
                    live.href = tues[7].link;
                break
            }
        break;
    
        case 3:
            switch (time)
            {
                case period1:
                    live.href = wed[0].link;
                break;
                
                case period2:
                    live.href = wed[1].link;
                break;
                
                case period3:
                    live.href = wed[2].link;
                break;
                
                case period4:
                    live.href = wed[3].link;
                break
    
                case period5:
                    live.href = wed[4].link;
                break;
                
                case period6:
                    live.href= wed[5].link;
                break;
    
                case period7:
                    live.href = wed[6].link;
                break;
    
                case period8:
                    live.href = wed[7].link;
                break
            }
        break;
        
        case 4:
            switch (time)
            {
                case period1:
                    live.href = thurs[0].link;
                break;
                
                case period2:
                    live.href = thurs[1].link;
                break;
                
                case period3:
                    live.href = thurs[2].link;
                break;
                
                case period4:
                    live.href = thurs[3].link;
                break
    
                case period5:
                    live.href = thurs[4].link;
                break;
                
                case period6:
                    live.href= thurs[5].link;
                break;
    
                case period7:
                    live.href = thurs[6].link;
                break;
    
                case period8:
                    live.href = thurs[7].link;
                break
            
                case period9:
                    live.href = thurs[8].link
                break;
            }
        break;
    
        case 5:
            switch (time)
            {
                case period1:
                    live.href = fri[0].link;
                break;
                
                case period2:
                    live.href = fri[1].link;
                break;
                
                case period3:
                    live.href = fri[2].link;
                break;
                
                case period4:
                    live.href = fri[3].link;
                break
    
                case period5:
                    live.href = fri[4].link;
                break;
                
                case period6:
                    live.href= fri[5].link;
                break;
    
                case period7:
                    live.href = fri[6].link;
                break;
    
                case period8:
                    live.href = fri[7].link;
                break
            }
        break;
            
        case 6:
            switch (time)
            {
                case period1:
                    live.href = sat[0].link;
                break;
                
                case period2:
                    live.href = sat[1].link;
                break;
                
                case period3:
                    live.href = sat[2].link;
                break;
                
                case period4:
                    live.href = sat[3].link;
                break
    
                case period5:
                    live.href = sat[4].link;
                break;
                
                case period6:
                    live.href= sat[5].link;
                break;
    
                case period7:
                    live.href = sat[6].link;
                break;
    
                case period8:
                    live.href = sat[7].link;
                break
            }
        break;
    } }, 1000)

// set timeout
// var tid = setTimeout(mycodeMon, 30000);
// function mycodeMon()
// {
//     for (var i = 0; i > mon.length; i++)
//     {
//         live.onclick = function ()
//         {
//             live.href = mon[i.link];
//             return false;
//         }

//         tid = setTimeout(mycodeMon, 30000); // repeat myself
//     }
//     function abortTimer()
//     {
//         // to be called when you want to stop the timer
//         clearTimeout(tid);
//     }
// }
console.log(sat)

<div class="live-class">
          <label class="time">Time</label>
          <p class="a-container"><a href="#" target="_blank" id="live" class="btn-dark">Join Live Class!</a></p>
        </div>

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
did not work 不是一个好的问题陈述
您的代码不完整，充满了错误和不一致。请编辑 sn-p 并将 JS 移动到 JavaScript 窗格并添加相关的 HTML 和 CSS：
day = days[day] 没有意义。要么是 0（星期日）到 6（星期六），要么是日期名称字符串
你为什么要使用 settimeout。如果您希望时间轴移动，只需使用 setTinterval。也不要多次添加live.onClick = function ()。然后在该点击中，您会发现现在是什么日期和时间并更改链接

标签： javascript time

【解决方案1】：

您的代码需要更简单，并且没有理由设置 setTimeout 或两个 setIntervals

你的情况是错误的。使用整数而不是日期名称

在这里，我通过将 day 数组设置在 day 上，大大缩短了您的代码。

如果 period1 太早，我也会指出 period1

const timeLabel = document.querySelector(".time");
const live = document.getElementById("live");

const schedule = () => {
  let d = new Date(2021,11,21,11,12,0,0),
    day = d.getDay(),
    hours = d.getHours(),
    minutes = d.getMinutes(),
    time = (hours * 60) + minutes,
    ampm = "AM";
  if (hours > 12) {
    hours -= 12;
    ampm = "PM";
  } else if (hours == 0) {
    hours = 12;
  }
  day = days[day];

  timeLabel.innerHTML = day + ", " + hours + ":" + pad(minutes) + " " + ampm;
  const lessonTimes = Object.keys(times);
  const timeEntries = Object.entries(times);
  const firstLesson = lessonTimes[0]
  const lastLesson = lessonTimes[lessonTimes.length-1]
  let currentLesson = "No lessons at the moment" 
  const nearest = gte(time,lessonTimes); // find nearest lesson
  console.log(time,nearest,times[nearest],)
  if (time>=firstLesson && time<=lastLesson) {
    time = nearest; // overwrite time that is already in progress
    let index = lessonTimes.findIndex(t => +t===nearest);
    let lesson = lessons[dayLessons[day][index]];
    currentLesson = `Join live class: ${times[time]} ${lesson.period}`
  }
  live.innerText = currentLesson;
  timeTable.innerHTML = dayLessons[day].map((lesson,i) => {
    let color = +timeEntries[i][0] === +time ? "green" : "";
    return `<li class="${color}">${lessons[lesson].link ? 
    `<a href="${lessons[lesson].link}">${lessons[lesson].period}</a>` : lessons[lesson].period}</li>`
    }).join("")

}
schedule();
setInterval(schedule, 60000)

.green { color:green }

<div class="live-class">
          <label class="time">Time</label>
          <p class="a-container"><a href="#" target="_blank" id="live" class="btn-dark">Join Live Class!</a></p>
        </div>  
     
<div id="timeTable"></div>
<script>
  const pad = num => String(num).padStart(2, "0"),
    gte = (num,arr) => Math.min.apply(Math, arr.filter(v => v >= num)),
    days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    times = {};
  times[(8 * 60) + 15] = "period 1"
  times[9 * 60] = "period 2"
  times[(9 * 60) + 30] = "snacktime"
  times[(9 * 60) + 50] = "period 3"
  times[(10 * 60) + 30] = "period 4"
  times[(11 * 60) + 10] = "period 5"
  times[(11 * 60) + 50] = "period 6"
  times[(12 * 60) + 20] = "lunchtime"
  times[13 * 60] = "period 7"
  times[(13 * 60) + 40] = "period 8"
  times[(14 * 60) + 30] = "period 9"

  const lessons = {
    english: {
      link: "https://classroom.google.com/c/MzAxNTI0MjgzNjMy",
      period: "English"
    },
    hindi: {
      link: "https://classroom.google.com/c/MjkzOTAxNjY3NDU5",
      period: "Hindi"
    },
    math: {
      link: "https://classroom.google.com/c/MjkzOTAxNjY3NDU5",
      period: "Mathematics"
    },
    science: {
      link: "https://classroom.google.com/c/MjkzODk5NzI2MDc3",
      period: "Science"
    },
    social_studies: {
      link: "https://classroom.google.com/c/Mjk0MDk5NDkyNjMx",
      period: "Social Studies"
    },
    computers: {
      link: "https://classroom.google.com/u/0/c/MzQ1Nzc1NDYwMjg3",
      period: "Computer Science"
    },
    sanskrit: {
      link: "https://classroom.google.com/c/MzAxNDQwMjk0MzA5",
      period: "Sanskrit"
    },
    telegu: {
      link: "https://classroom.google.com/c/MjkzODk5NzI2MDc3",
      period: "Telegu"
    },
    art: {
      link: "https://classroom.google.com/u/0/c/Mjk3NTkzMzI0NzU1",
      period: "Art"
    },
    music: {
      link: "https://classroom.google.com/u/0/c/NDE1MTI0MzgwNjY5",
      period: "Music"
    },
    supw: {
      link: "https://classroom.google.com/u/0/c/Mjk0MDg4MDIyMTAz",
      period: "Socially Useful Productive Work (SUPW)"
    },
    martial_arts: {
      link: "https://classroom.google.com/u/0/c/Mjk4OTU4NjkxNzI1",
      period: "Martial Arts"
    },
    yoga: {
      link: "https://classroom.google.com/u/0/c/Mjk0NDU5MTQwNDUx",
      period: "Yoga"
    },
    dance: {
      link: "https://classroom.google.com/u/0/c/Mjk5MzY3NjYyMzEz",
      period: "Dance"
    },
    handicraft: {
      link: "https://classroom.google.com/u/0/c/MzYwNzYyODc1NTg1",
      period: "Handicraft"
    },
    assembly: {
      link: "https://classroom.google.com/c/MzAxNTI0MjgzNjMy",
      period: "Assembly"
    },
    snack: {
      period: "Snack"
    },
    lunch: {
      period: "Lunch"
    }
  }
  const dayLessons = {
    "Monday": [
      "math",
      "social_studies",
      "snack",
      "english",
      "science",
      "hindi",
      "lunch",
      "hindi",
      "english",
      "math",
    ],
    "Tuesday": [
      "hindi",
      "social_studies",
      "snack",
      "computers",
      "martial_arts",
      "english",
      "lunch",
      "telegu",
      "science",
      "math",
    ],
    "Wednesday": [
      "dance",
      "telegu",
      "snack",
      "english",
      "yoga",
      "science",
      "lunch",
      "math",
      "social_studies",
      "sanskrit"
    ],
    "Thursday": [
      "computers",
      "music",
      "english",
      "snack",
      "hindi",
      "social_studies",
      "science",
      "lunch",
      "sanskrit",
      "assembly",
      "handicraft"
    ],
    "Friday": [
      "telegu",
      "hindi",
      "snack",
      "hindi",
      "math",
      "science",
      "lunch",
      "social_studies",
      "english",
      "math"
    ],
    "Saturday": [
      "sanskrit",
      "social_studies",
      "snack",
      "math",
      "english",
      "hindi",
      "lunch",
      "supw",
      "science",
      "art"
    ],
    "Sunday": []
  }
</script>

【讨论】：

嗨，我是新人，这是我的第一个问题，请告诉为什么这个问题被关闭了？？
您是否阅读了我发布的链接并考虑了我关于“不起作用”的评论？
非常感谢，您帮了大忙。这是我学习后使用JS的第一个项目。为什么使用常量而不是变量？你有什么好的免费课程来学习更多 JavaScript 吗？
看看上面的代码，你能告诉我我的弱点和应该改进的地方吗？
您好，当我插入我的 JavaScript 文件时，您的代码不起作用。我试图更改类名等以适合我的，但没有。我已经插入了我的 HTML。请看。提前致谢