[英]setInterval not working with specific function
I have a script that creates a bar at the top right of the browser with current date and time. 我有一个脚本,该脚本在浏览器的右上角创建带有当前日期和时间的栏。 I'm trying to update it every thirty seconds so that it keeps a live time, and not just the time when the page loaded.
我正在尝试每三十秒更新一次,以便它保持实时运行,而不仅仅是页面加载的时间。 You'll see that I create the time bar with the set_time() function onload, and then create a setInterval that is intended to call timer() which in turn updates the time by calling the set_time() function again.
您会看到我在onload时创建了带有set_time()函数的时间栏,然后创建了一个旨在调用timer()的setInterval,后者又通过再次调用set_time()函数来更新时间。 The timer is clearly firing because every 4 seconds I get an alert box with "hi" (from the timer() function), but then when it's supposed to call set_time() after this it isn't working.
计时器显然在触发,因为每隔4秒钟我就会收到一个带有“ hi”的警报框(来自timer()函数),但是在此之后它应该调用set_time()时却不起作用。 I should be getting an alert with "set time" (located at the end of the set_time() function) each time the timer is fired as well, which I do not.
每次触发计时器时,我也应该收到“设置时间”(位于set_time()函数末尾)的警报,我没有。 Can anybody help?
有人可以帮忙吗?
window.onload = function(){
set_time();
window.setInterval(timer, 4000);
};
function timer(){
alert('hi');
set_time();
}
function set_time(){
//create date object to manipulate
var d = new Date();
//current day of the week
var d_names= new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
curr_day = d.getDay();
//current date
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
//current Time
var a_p = "";
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "a.m.";
}
else
{
a_p = "p.m.";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1)
{
curr_min = "0" + curr_min;
}
element = document.getElementById('dateTime');
if(element){
//if dateDiv already exists, update contents
dateDiv.innerHTML = '';
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
}
else{
//else create new dateDiv and append it to DOM body
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
document.body.appendChild(dateDiv);
}
alert('set time');
//setTimeout("set_time()", 3000);
}
You are assigning the #dateTime
div to the element
variable and even check for it's existance, but when you have confirmed that element
exists you use a dateDiv
variable. 您正在将
#dateTime
div分配给element
变量,甚至检查它是否存在,但是当您确认该element
存在时,可以使用dateDiv
变量。 That one is undefined and throws an exception on setting its innerHTML
property; 那是未定义的,会在设置其
innerHTML
属性时引发异常; you should be able to see that in your browser's error console. 您应该能够在浏览器的错误控制台中看到它。
Use this code instead: 请改用以下代码:
var element = document.getElementById('dateTime');
if (!element) {
element = document.createElement('div');
document.body.appendChild(element);
}
element.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
If you look at your error console, you will see that javascript throws a 'dateDiv not defined' error here (just before the else
): dateDiv.innerHTML = '';
如果您查看错误控制台,则会发现javascript在此处抛出“ dateDiv未定义”错误(就在
else
之前): dateDiv.innerHTML = '';
To avoid that (and get your script working), do this: 为了避免这种情况(并使脚本正常工作),请执行以下操作:
Code the div layer into your HTML (don't create it using javascript) like so: <div id="dateTime"></div>
像这样将div层编码到您的HTML中(不要使用javascript创建它):
<div id="dateTime"></div>
Remove the else
block at the end (it is now superfluous because of step 1) 最后删除
else
块(由于步骤1,它现在是多余的)
Add this to the top of set_time(): var dateDiv = document.getElementById( 'dateTime' );
将其添加到set_time()的顶部:
var dateDiv = document.getElementById( 'dateTime' );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.