我正在使用以下代码来更新我的例程。因此，在一定的时间间隔内，背景变为指定的间隔。我还希望以12小时格式显示Real时钟，并显示在突出显示下一行之前剩余的总时间。例如，如果现在行时间间隔为11：00-12：00 PM，则突出显示当时实时时间是11:30 ....我想在旁边显示30分钟。
以下是我的代码
utilfunction openCity(evt, cityName, today) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
if(typeof today == 'undefined') {
evt.currentTarget.className += " active";
}
else {
tablinks[today].className += " active";
}
}div.tab {
overflow: hidden;
border-top: 1px solid black;
background-color: #808080;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: #808080;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 1px 2%;
transition: 0.3s;
font-size: 13px;
font-weight: bold;
color: white;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: white;
font-size: 20px;
color: red;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 2px 2px;
border-top: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #ffffff;
width="100%" border="0" cellspacing="0" cellpadding="0";
box-shadow: 1px 1px 1px #999;
}
th {
background-color: #4CAF50;
color: white;
}
th, td {
text-align: left;
padding: 8px;
font-family: courier;
font-size: 16px;
border-color : black;
border-width: 1px;
border-style: solid;
}
td{
color: #060290;
}
tr:nth-child(even){background-color: #f2f2f2}
答案 0 :(得分：0)
这里我写了一个解决方案。它在一天24小时内工作。您还可以根据需要进行设置。代码中有一些注释。
var count_time = [
{ start: { h: 0, m: 0, s: 0 }, end: { h: 2, m: 0, s: 0 } },
{ start: { h: 2, m: 0, s: 0 }, end: { h: 4, m: 0, s: 0 } },
{ start: { h: 4, m: 0, s: 0 }, end: { h: 6, m: 0, s: 0 } },
{ start: { h: 6, m: 0, s: 0 }, end: { h: 8, m: 0, s: 0 } },
{ start: { h: 8, m: 0, s: 0 }, end: { h: 10, m: 0, s: 0 } },
{ start: { h: 10, m: 0, s: 0 }, end: { h: 12, m: 0, s: 0 } },
{ start: { h: 12, m: 13, s: 21 }, end: { h: 14, m: 21, s: 41 } },
{ start: { h: 16, m: 0, s: 0 }, end: { h: 18, m: 0, s: 0 } },
{ start: { h: 18, m: 0, s: 0 }, end: { h: 20, m: 0, s: 0 } },
{ start: { h: 20, m: 0, s: 0 }, end: { h: 22, m: 0, s: 0 } },
{ start: { h: 22, m: 0, s: 0 }, end: { h: 23, m: 59, s: 59 } }
];
window.setInterval(function () {
var status = ['elapsed','active','upcoming'];
var data = '';
count_time.forEach(function (e) {
let i = show_difference(e);
// Generate table body
data += `<tr class="${status[i['status']]}">
<td>${i['start']}–${i['end']}</td>
<td>${i['difference'] !== 0 ? i['difference'] : '—'}</td>
</tr>`;
});
document.getElementById('my_pretty_table').getElementsByTagName("tbody")[0].innerHTML = data;
// Add current time clock
document.getElementById('current_time').innerHTML = new Date().toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
}, 10);
function show_difference(time) {
// Curret time
var current= new Date();
var current_ms = current.getTime();
var current_con = current.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
// Start time
var start = new Date(current.toDateString());
start.setHours(time.start.h);
start.setMinutes(time.start.m);
start.setSeconds(time.start.s);
var start_ms = start.getTime();
var start_con = start.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric'/*, second: 'numeric'*/, hour12: true });
// End time
var end = new Date(current.toDateString());
end.setHours(time.end.h);
end.setMinutes(time.end.m);
end.setSeconds(time.end.s);
var end_ms = end.getTime();
var end_con = end.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric'/*, second: 'numeric' */, hour12: true });
// Time left in milliseconds
var left = end_ms-current_ms;
// Count millisecons in:
var day = 1000 * 60 * 60 * 24;
var hour = 1000 * 60 * 60;
var minute = 1000 * 60;
// Formating
var hours = Math.floor((left % day) / hour).toLocaleString('en-US', { style: 'decimal', minimumIntegerDigits: '2' });
var minutes = Math.floor((left % hour) / minute).toLocaleString('en-US', { style: 'decimal', minimumIntegerDigits: '2' });
var seconds = Math.floor(((left % hour) % minute) / 1000).toLocaleString('en-US', { style: 'decimal', minimumIntegerDigits: '2' });
// Time left (formated)
var difference = left > 0 ? ((hours > 0 ? (hours + ':') : '') + (minutes > 0 ? (minutes + ':') : (hours > 0 ? '00:' : '')) + seconds) : 0;
// 00:00 (Hours and Minutes) time format (without seconds):
// var difference = left > 0 ? ((hours > 0 ? (hours) : '00') + ':' + (minutes > 0 ? (minutes) : '00')) : 0;
// Time status
if (current_ms > start_ms && current_ms < end_ms) {
var status = 1; // Active
} else if (current_ms < start_ms && current_ms < end_ms) {
var status = 2; // Upcoming
} else {
var status = 0; // Elapsed
}
return {
start : start_con,
end : end_con,
status : status,
difference : difference
};
} body {
margin:60px;
}
* {
font-family: sans-serif;
color: #333;
}
#my_pretty_table {
background: #fafafa;
border-spacing: 0;
text-align: center;
margin: 0 auto;
width: 430px;
box-shadow: 0 0 12px #eee;
box-shadow: 0 0 3px #ccc;
border: 10px solid white;
}
#my_pretty_table tbody td, #my_pretty_table thead th {
padding: 13px 17px 13px 17px;
}
#my_pretty_table thead th {
border-bottom: 1px dashed #ccc;
}
#my_pretty_table tbody td {
font-variant-numeric: proportional-nums tabular-nums;
}
#my_pretty_table tbody .active {
background-color: #bbf7b6;
}
#my_pretty_table tbody .upcoming {
background-color:#b6ebf7;
}
#my_pretty_table tbody .elapsed {
color:#ccc;
}
#status {
//background:silver;
display:flex;
justify-content:center;
padding:20px;
}
#status > div {
line-height:30px;
}
#a_s, #u_s, #e_s {
padding:10px;
}
#a_s > div, #u_s > div, #e_s > div {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
border-radius: 20px;
border: 5px solid white;
box-shadow: 0 0 12px #eee;
box-shadow: 0 0 4px #bbb;
}
#a_s > div {
background:#bbf7b6;
}
#u_s > div {
background: #b6ebf7;
}
#e_s > div {
background: #fafafa;
}
#current_time {
padding:40px;
font-size:xx-large;
text-align:center;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="current_time"></div>
<table id="my_pretty_table">
<thead>
<tr>
<th>Time period</th><th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="status">
<div id="a_s"><div> </div>Active</div>
<div id="u_s"><div> </div>Upcoming</div>
<div id="e_s"><div> </div>Elapsed</div>
</div>
</body>
</html>