我正在尝试创建一个以红色突出显示当前时间的表，但它不起作用。任何人都可以给我任何有关错误的信息吗？谢谢。这是HTML和javascript：
............................................... .................................................. .................................................. ...............
var c = document.getElementById(block);
if (c != null)
c.style.background = 'red';
var d = new Date();
var day = d.getDay();
var minutes = d.getMinutes();
var e = document.getElementById("info");
if (minutes < 30)
hour = hour - 1;
var block = "time" + day + ":" + hour;
e.innerHTML = "Time is now " + block;
}
function startUpdate()
{
updatePage();
window.setInterval(updatePage, 10 * 1000);
}
window.onload=startUpdate;<html>
<head><link href="calendar.css" rel="stylesheet" type=“text/css"/>
<script src="calendar.js" type=“text/javascript”></script></head>
<body>
<h1 id="info"></h1>
<table>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:30-9:30</th>
<td id="time1:8"></td>
<td id="time2:8"></td>
<td id="time3:8"></td>
<td id="time4:8"></td>
<td id="time5:8"></td>
</tr>
<tr>
<th>9:30-10:30</th>
<td id="time1:9"></td>
<td id="time2:9"></td>
<td id="time3:9"></td>
<td id="time4:9"></td>
<td id="time5:9"></td>
</tr>
<tr>
<th>10:30-11:30</th>
<td id="time1:10"></td>
<td id="time2:10"></td>
<td id="time3:10"></td>
<td id="time4:10"></td>
<td id="time5:10"></td>
</tr>
<tr>
<th>11:30-12:30</th>
<td id="time1:11"></td>
<td id="time2:11"></td>
<td id="time3:11"></td>
<td id="time4:11"></td>
<td id="time5:11"></td>
</tr>
<tr>
<th>12:30-1:30</th>
<td id="time1:12"></td>
<td id="time2:12"></td>
<td id="time3:12"></td>
<td id="time4:12"></td>
<td id="time5:12"></td>
</tr>
<tr>
<th>1:30-2:30</th>
<td id="time1:13"></td>
<td id="time2:13"></td>
<td id="time3:13"></td>
<td id="time4:13"></td>
<td id="time5:13"></td>
</tr>
<tr>
<th>2:30-3:30</th>
<td id="time1:14"></td>
<td id="time2:14"></td>
<td id="time3:14"></td>
<td id="time4:14"></td>
<td id="time5:14"></td>
</tr>
<tr>
<th>3:30-4:30</th>
<td id="time1:15"></td>
<td id="time2:15"></td>
<td id="time3:15"></td>
<td id="time4:15"></td>
<td id="time5:15"></td>
</tr>
<tr>
<th>4:30-5:30</th>
<td id="time1:16"></td>
<td id="time2:16"></td>
<td id="time3:16"></td>
<td id="time4:16"></td>
<td id="time5:16"></td>
</tr>
<tr>
<th>5:30-6:30</th>
<td id="time1:17"></td>
<td id="time2:17"></td>
<td id="time3:17"></td>
<td id="time4:17"></td>
<td id="time5:17"></td>
</tr>
<tr>
<th>6:30-7:30</th>
<td id="time1:18"></td>
<td id="time2:18"></td>
<td id="time3:18"></td>
<td id="time4:18"></td>
<td id="time5:18"></td>
</tr>
<tr>
<th>7:30-8:30</th>
<td id="time1:19"></td>
<td id="time2:19"></td>
<td id="time3:19"></td>
<td id="time4:19"></td>
<td id="time5:19"></td>
</tr>
<tr>
<th>8:30-9:30</th>
<td id="time1:20"></td>
<td id="time2:20"></td>
<td id="time3:20"></td>
<td id="time4:20"></td>
<td id="time5:20"></td>
</tr>
<tr>
<th>9:30-10:30</th>
<td id="time1:21"></td>
<td id="time2:21"></td>
<td id="time3:21"></td>
<td id="time4:21"></td>
<td id="time5:21"></td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：1)
主要问题确实是你的javascript的排序。首先，我假设程序的顶行在您的代码段中被截断，它应该是“UpdatePage”函数的开头。
以下是我对你的重组：
function updatePage() {
var d = new Date();
var day = d.getDay();
var minutes = d.getMinutes();
// I had to add this line because 'hour' wasn't defined.
var hour = d.getHours();
if (minutes < 30)
hour = hour - 1;
// 'block' uses the results of your date manipulation
// so it must be defined after they are set up but as
// 'Niet the Dark Absol' said it should also be before
// it is used below as well.
var block = "time" + day + ":" + hour;
var c = document.getElementById(block);
if (c != null)
c.style.background = 'red';
var e = document.getElementById("info");
e.innerHTML = "Time is now " + block;
}
我认为这些是大多数变化。我为你准备了这个确切版本的jsFiddle版本，但有一个例外。我做到了这样，在顶部你可以指定一个日期，因为ME的当前日期/时间至少目前不在这里使用的范围内。
检查出来：http://jsfiddle.net/Lanlost/z0qgn9wj/
如果您有任何其他问题，请与我们联系。你到了那里=）\
答案 1 :(得分：0)
所以，你有一些错误，对JSFiddle中的代码做了几处修复。
值得注意的是，您没有运行任何实际的页面更新功能，您的列ID已关闭，还有其他一些内容，请查看：https://jsfiddle.net/huucmhvu/2/
$(document).ready(function() {
function updatePage(){
var d = new Date();
//get the day plus two (to adjust for the first column and the fact that our IDs start at 1 not 0 )
var day = d.getDay()+2;
var hour = d.getHours();
var minutes = d.getMinutes();
var e = $("#info");
if (minutes < 30) {
hour = hour - 1;
}
var block = "time"+day + "-" + hour;
$(e).html( "Time is now " + block);
var c = $('#'+block);
if (c.length>0){
c.css('background','red');
}
}
function startUpdate()
{
updatePage();
window.setInterval(updatePage, 10 * 1000);
}
startUpdate();
}）;
如果这是生产质量代码，我会做很多修正，但你的例子现在正在运行，时间和正确的日期突出显示。
答案 2 :(得分：0)
function getHourIn12(hour) {
if (hour > 12) {
return hour - 12;
} else {
return hour;
}
}
function updatePage() {
var date = new Date();
var min = date.getMinutes();
var hourIn24 = date.getHours();
var hourIn12 = getHourIn12(hourIn24);
var lowerHour = 0;
if (min <= 30) {
lowerHour = (hourIn24 - 1);
} else {
lowerHour = hourIn24;
}
targetHeadings = $('#time' + date.getDay() + '-' + lowerHour);
targetHeadings.text('');
targetHeadings.css('background', 'red').text(hourIn12 + ':' + min);
console.log(targetHeadings);
}
timer = window.setInterval(updatePage, 1000);td, th{
min-width: 100px;
text-align: center;
}
td{
color: white;
}
th{
background: grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head><link href="calendar.css" rel="stylesheet" type=“text/css"/>
<script src="calendar.js" type=“text/javascript”></script></head>
<body>
<h1 id="info"></h1>
<table>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:30-9:30</th>
<td id="time1-8"></td>
<td id="time2-8"></td>
<td id="time3-8"></td>
<td id="time4-8"></td>
<td id="time5-8"></td>
</tr>
<tr>
<th>9:30-10:30</th>
<td id="time1-9"></td>
<td id="time2-9"></td>
<td id="time3-9"></td>
<td id="time4-9"></td>
<td id="time5-9"></td>
</tr>
<tr>
<th>10:30-11:30</th>
<td id="time1-10"></td>
<td id="time2-10"></td>
<td id="time3-10"></td>
<td id="time4-10"></td>
<td id="time5-10"></td>
</tr>
<tr>
<th>11:30-12:30</th>
<td id="time1-11"></td>
<td id="time2-11"></td>
<td id="time3-11"></td>
<td id="time4-11"></td>
<td id="time5-11"></td>
</tr>
<tr>
<th>12:30-1:30</th>
<td id="time1-12"></td>
<td id="time2-12"></td>
<td id="time3-12"></td>
<td id="time4-12"></td>
<td id="time5-12"></td>
</tr>
<tr>
<th>1:30-2:30</th>
<td id="time1-13"></td>
<td id="time2-13"></td>
<td id="time3-13"></td>
<td id="time4-13"></td>
<td id="time5-13"></td>
</tr>
<tr>
<th>2:30-3:30</th>
<td id="time1-14"></td>
<td id="time2-14"></td>
<td id="time3-14"></td>
<td id="time4-14"></td>
<td id="time5-14"></td>
</tr>
<tr>
<th>3:30-4:30</th>
<td id="time1-15"></td>
<td id="time2-15"></td>
<td id="time3-15"></td>
<td id="time4-15"></td>
<td id="time5-15"></td>
</tr>
<tr>
<th>4:30-5:30</th>
<td id="time1-16"></td>
<td id="time2-16"></td>
<td id="time3-16"></td>
<td id="time4-16"></td>
<td id="time5-16"></td>
</tr>
<tr>
<th>5:30-6:30</th>
<td id="time1-17"></td>
<td id="time2-17"></td>
<td id="time3-17"></td>
<td id="time4-17"></td>
<td id="time5-17"></td>
</tr>
<tr>
<th>6:30-7:30</th>
<td id="time1-18"></td>
<td id="time2-18"></td>
<td id="time3-18"></td>
<td id="time4-18"></td>
<td id="time5-18"></td>
</tr>
<tr>
<th>7:30-8:30</th>
<td id="time1-19"></td>
<td id="time2-19"></td>
<td id="time3-19"></td>
<td id="time4-19"></td>
<td id="time5-19"></td>
</tr>
<tr>
<th>8:30-9:30</th>
<td id="time1-20"></td>
<td id="time2-20"></td>
<td id="time3-20"></td>
<td id="time4-20"></td>
<td id="time5-20"></td>
</tr>
<tr>
<th>9:30-10:30</th>
<td id="time1-21"></td>
<td id="time2-21"></td>
<td id="time3-21"></td>
<td id="time4-21"></td>
<td id="time5-21"></td>
</tr>
</table>
</body>
</html>