如何根据时间和日期更改href基础[关闭]
Posted
技术标签:
【中文标题】如何根据时间和日期更改href基础[关闭]【英文标题】：how to change href bases on time and day [closed] 【发布时间】：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://clas-s-room.google.com/c/MzAxNTI0MjgzNjMy",
period: "English"
,
hindi =
link: "https://clas-s-room.google.com/c/MjkzOTAxNjY3NDU5",
period: "Hindi"
,
math =
link: "https://clas-s-room.google.com/c/MjkzOTAxNjY3NDU5",
period: "Mathematics"
,
science =
link: "https://clas-s-room.google.com/c/MjkzODk5NzI2MDc3",
period: "Science"
,
social_studies =
link: "https://clas-s-room.google.com/c/Mjk0MDk5NDkyNjMx",
period: "Social Studies"
,
computers =
link: "https://clas-s-room.google.com/u/0/c/MzQ1Nzc1NDYwMjg3",
period: "Computer Science"
,
sanskrit =
link: "https://clas-s-room.google.com/c/MzAxNDQwMjk0MzA5",
period: "Sanskrit"
,
telegu =
link: "https://clas-s-room.google.com/c/MjkzODk5NzI2MDc3",
period: "Telegu"
,
art =
link: "https://clas-s-room.google.com/u/0/c/Mjk3NTkzMzI0NzU1",
period: "Art"
,
music =
link: "https://clas-s-room.google.com/u/0/c/NDE1MTI0MzgwNjY5",
period: "Music"
,
supw =
link: "https://clas-s-room.google.com/u/0/c/Mjk0MDg4MDIyMTAz",
period: "Socially Useful Productive Work (SUPW)"
,
martail_arts =
link: "https://clas-s-room.google.com/u/0/c/Mjk4OTU4NjkxNzI1",
period: "Martial Arts"
,
yoga =
link: "https://clas-s-room.google.com/u/0/c/Mjk0NDU5MTQwNDUx",
period: "Yoga"
,
dance =
link: "https://clas-s-room.google.com/u/0/c/Mjk5MzY3NjYyMzEz",
period: "Dance"
,
handicarft =
link: "https://clas-s-room.google.com/u/0/c/MzYwNzYyODc1NTg1",
period: "Handicraft"
,
assembly =
link: "https://clas-s-room.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 ()。然后在该点击中，您会发现现在是什么日期和时间并更改链接
【参考方案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://clas-s-room.google.com/c/MzAxNTI0MjgzNjMy",
period: "English"
,
hindi:
link: "https://clas-s-room.google.com/c/MjkzOTAxNjY3NDU5",
period: "Hindi"
,
math:
link: "https://clas-s-room.google.com/c/MjkzOTAxNjY3NDU5",
period: "Mathematics"
,
science:
link: "https://clas-s-room.google.com/c/MjkzODk5NzI2MDc3",
period: "Science"
,
social_studies:
link: "https://clas-s-room.google.com/c/Mjk0MDk5NDkyNjMx",
period: "Social Studies"
,
computers:
link: "https://clas-s-room.google.com/u/0/c/MzQ1Nzc1NDYwMjg3",
period: "Computer Science"
,
sanskrit:
link: "https://clas-s-room.google.com/c/MzAxNDQwMjk0MzA5",
period: "Sanskrit"
,
telegu:
link: "https://clas-s-room.google.com/c/MjkzODk5NzI2MDc3",
period: "Telegu"
,
art:
link: "https://clas-s-room.google.com/u/0/c/Mjk3NTkzMzI0NzU1",
period: "Art"
,
music:
link: "https://clas-s-room.google.com/u/0/c/NDE1MTI0MzgwNjY5",
period: "Music"
,
supw:
link: "https://clas-s-room.google.com/u/0/c/Mjk0MDg4MDIyMTAz",
period: "Socially Useful Productive Work (SUPW)"
,
martial_arts:
link: "https://clas-s-room.google.com/u/0/c/Mjk4OTU4NjkxNzI1",
period: "Martial Arts"
,
yoga:
link: "https://clas-s-room.google.com/u/0/c/Mjk0NDU5MTQwNDUx",
period: "Yoga"
,
dance:
link: "https://clas-s-room.google.com/u/0/c/Mjk5MzY3NjYyMzEz",
period: "Dance"
,
handicraft:
link: "https://clas-s-room.google.com/u/0/c/MzYwNzYyODc1NTg1",
period: "Handicraft"
,
assembly:
link: "https://clas-s-room.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。请看。提前致谢以上是关于如何根据时间和日期更改href基础[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
如何根据条件更改 DataGridView 的行颜色以检查日期是不是过期