我目前正在编写一个脚本，显示一段时间，直到我的学校结束或开始。需要排除阵列中的一个数据集被计为周期。
{ start: minutes(11, 20), end: minutes(11, 46) },
我想排除这些数据，因为它不是一个完整的成熟时期，它的午餐，我不知道我应该怎么做。有任何想法吗？此消息也需要更改为用户而不是。
document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " is over."
有什么想法吗？
body, html {
height: 100%;
}
body {
background-color: #a00000;
margin: 0; /* remove default margins added by browsers */
}
.wrapper {
display: flex;
height: 100%;
}
#result {
margin: auto;
padding: 25px;
font-weight: bold;
text-align: center;
color:black;
width: 250px;
border-radius: 10px;
background-color: white;
}
h1 {
font-weight: bold;
margin:auto;
font-size: 20px;
}
.lunch {
width: 95px;
background-color: #a00000;
color: white;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
}<html>
<head>
<meta charset="UTF-8">
<title>Marking Period Countdow</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="myFunction(myTime, periods);">
<script>
//Get current date & midnight
var now = new Date();
var midnight = new Date();
midnight.setHours(0,0,0,0);
//Get number of minutes that passed since midnight:
var myTime = Math.floor((now.getTime() - midnight.getTime()) / 60000);
//For Testing Purposes.
// console.log(myTime + ' minutes passed since midnight.');
function minutes(hour, min) {
return hour * 60 + min;
}
//All the periods throughout my school day.
var periods = [
{ start: minutes( 7, 45), end: minutes( 8, 34) },
{ start: minutes( 8, 38), end: minutes( 9, 30) },
{ start: minutes( 9, 34), end: minutes(10, 23) },
{ start: minutes(10, 27), end: minutes(11, 16) },
{ start: minutes(11, 20), end: minutes(12, 09) },
{ start: minutes(12, 12), end: minutes(12, 38) },
{ start: minutes(12, 42), end: minutes(13, 31) },
{ start: minutes(13, 35), end: minutes(14, 25) },
];
function myFunction(myTime, periods) {
periods.every(function (period, i) {
if (myTime < period.start) {
if (i == 0) {
console.log('School has not started yet');
document.getElementById("result").innerHTML = "School has not started yet";
} else {
var timeLeft = period.start - myTime;
console.log("There are " + timeLeft + " minutes left until period " + (i+1) + " starts.");
document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " starts.";
}
} else if (myTime < period.end) {
var timeLeft = period.end - myTime;
console.log("There are " + timeLeft + " minutes left until period " + (i+1) + " is over.");
document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " is over.";
} else if (i == periods.length - 1) {
console.log('School has finished for today');
document.getElementById("result").innerHTML = "School has finished for today";
} else {
return true; // keep looking for the right period
}
});
}
</script>
<div class="wrapper">
<div id="result"></div>
</div>
</body>
</html>
答案 0 :(得分：0)
我只能图像有多少学生想知道他们已经离开了多少时间;）
我认为您在排除方面的目的是：
if (myTime > periods[4].start && myTime < periods[4].end) {
console.log('Lunch period');
document.getElementById("result").innerHTML = "Lunch period";
}
放在if (myTime < period.start)之前，然后将该行转为else if。
不确定您的午餐休息时间来自您的阵列结构，但用休息时间替换4：）
答案 1 :(得分：0)
如果您想让它更具功能性，您可以为您的消息创建函数，然后让句点自己定义它们应显示的消息。如下所示。
//Get current date & midnight
var now = new Date();
var midnight = new Date();
midnight.setHours(0, 0, 0, 0);
//Get number of minutes that passed since midnight:
var myTime = Math.floor((now.getTime() - midnight.getTime()) / 60000);
function minutes(hour, min) {
return hour * 60 + min;
}
function defaultMessage(minutes, i) {
document.getElementById("result").innerHTML = "There are " + minutes + " minutes left until period " + (i + 1) + " is over.";
};
function lunchMessage(minutes, i) {
document.getElementById("result").innerHTML = "Lunch will end in " + minutes + " minutes";
};
//All the periods throughout my school day.
var periods = [{
start: minutes(7, 45),
end: minutes(8, 34),
message: defaultMessage
}, {
start: minutes(8, 38),
end: minutes(9, 30),
message: defaultMessage
}, {
start: minutes(9, 34),
end: minutes(10, 23),
message: defaultMessage
}, {
start: minutes(10, 27),
end: minutes(11, 16),
message: defaultMessage
}, {
start: minutes(11, 20),
end: minutes(12, 09),
message: defaultMessage
}, {
start: minutes(12, 12),
end: minutes(12, 38),
message: lunchMessage
}, {
start: minutes(12, 42),
end: minutes(13, 31),
message: defaultMessage
}, {
start: minutes(13, 35),
end: minutes(14, 25),
message: defaultMessage
}, ];
function myFunction(myTime, periods) {
periods.every(function(period, i) {
if (myTime < period.start) {
if (i == 0) {
document.getElementById("result").innerHTML = "School has not started yet";
} else {
var timeLeft = period.start - myTime;
document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " starts.";
}
} else if (myTime < period.end) {
var timeLeft = period.end - myTime;
period.message(timeLeft, i);
} else if (i == periods.length - 1) {
document.getElementById("result").innerHTML = "School has finished for today";
} else {
return true; // keep looking for the right period
}
});
}body,
html {
height: 100%;
}
body {
background-color: #a00000;
margin: 0;
/* remove default margins added by browsers */
}
.wrapper {
display: flex;
height: 100%;
}
#result {
margin: auto;
padding: 25px;
font-weight: bold;
text-align: center;
color: black;
width: 250px;
border-radius: 10px;
background-color: white;
}
h1 {
font-weight: bold;
margin: auto;
font-size: 20px;
}
.lunch {
width: 95px;
background-color: #a00000;
color: white;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
}<body onload="myFunction(myTime, periods);">
<div class="wrapper">
<div id="result"></div>
</div>
</body>