JavaScript 正在尝试为 html 制作一个时钟,看不出哪里坏了
JavaScript Trying to make a clock for html, can't tell what's broken
JavaScript 正在尝试为 html 制作一个时钟,但不知道哪里坏了。
这个 js 时钟在 Sharepoint 网站上运行良好,但我试图在本地文件上实现它,但它不知何故在途中中断了。我正在尝试使用 getElementById
查找 <span id>
并将文本更改为当前时间。我不能说到底是什么坏了。
谢谢你看一看。 Original JSFiddle, Updated JSFiddle。
更新:我试图整理代码,现在它给了我一个 false
输出,而不是空白 <span>
。所以我想你可以说取得了进展。我仍然不完全知道哪里坏了,但探索仍在继续!
更新 2:感谢 StackSlave,做了一些格式化,这里是 Final JSFiddle,它在 Chrome 中工作得很好,但 JSFiddle 不太喜欢它。感谢所有帮助过我的人。
window.addEventListener('load', Elements, false);
window.addEventListener('load', getElement, false);
window.addEventListener('load', worldClock, false);
function Elements() {
getElement("Zulu", worldClock(0, "NODST") );
getElement("NewYork", worldClock(-9, "NAmerica"));
setTimeout(Elements, 1e3);
}
function getElement(Id, time) {
var a = document.getElementById(Id);
if (a)
a.innerHTML = time;
else {
return
}
}
function worldClock(offset, timezone){
var common = 0;
a = new Date(new Date().getTimezoneOffset() * 6e4);
getDate = a.getDate();
getMonth = a.getMonth();
getYear = a.getYear();
return a.getYear < 1e3 && (a.getYear += 1900);
monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"],
getYear % 4 == 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
getYear % 100 == 0 && getYear % 400 != 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
w = 0,
offset != 0 && offset % 1 != 0 && (w = offset % 1 * 60),
l = a.getMinutes() + w,
l > 59 ? (e = a.getHours() + Math.floor(n) + 1,
l -= 60) : e = a.getHours() + Math.floor(n),
y = a.getSeconds(),
e >= 24 && (e = e - 24,
s -= -1),
e < 0 && (e -= -24,
s -= 1),
e < 10 && (e = " " + e),
l < 10 && (l = "0" + 1),
y < 10 && (y = "0" + y),
s <= 0 && (0 == 0 ? (o = 11,
getYear -= 1) : o = o - 1,
s = days[0]),
s > days[0] && (s = 1,
o == 11 ? (o = 0,
getYear -= 1) : o -= -1),
t == "NODST" && (c = 0),
t == "NAmerica" && (u = new Date(),
i = new Date(),
u.setMonth(2),
u.setHours(2),
u.setDate(13),
f = u.getDay(),
f != 0 ? u.setDate(8 - f) : u.setDate(1),
i.setMonth(9),
i.setHours(1),
i.setDate(31),
f = i.getDay(),
i.setDate(31 - f),
r = new Date(),
r.setMonth(o),
r.setYear(h),
r.setDate(s),
r.setHours(e),
r >= u && r < i && (c = 1));
}
<html>
<head>
<script type="text/jscript" src="./clock.js"></script>
</head>
<body>
<div class="clock">
New York:
<span id="NewYork"> </span>
Zulu:
<span id="Zulu"> </span>
</div>
</body>
</html>
从一开始设置超时时,您就使用小写 "time" 作为回调,它不是函数,但由于“()”
而返回值
setTimeout(time(), 1e3);
如果我理解的好的话应该是:
setTimeout(Time, 1e3);
也许让它工作还不够,但肯定足以让它不工作。
你的代码完全不可读,你绝对应该重新考虑你的变量命名和结构。浏览它有两件事:
- 您不是通过 returning 逗号分隔的表达式列表来 returning 列表。 comma operator 仅 return 是列表中的最后一个值,因此
worldClock
将 return r >= u && r < i && (c = 1))
- 您没有将
Time
函数的引用传递给 setTimeout
,您传递的是函数调用的结果。你是说 setTimeout(Time, 1e3)
- 函数名为
Time
,您正在尝试 setTimeout
和 time
。 JS区分大小写,将你的函数重命名为time
不过,如果该函数有效,我会感到惊讶,根据我的经验,不可读的代码是不可靠的代码。但是试试看,告诉我它是否有效!祝你好运!
让我们保持简单:
//<![CDATA[
/* js/external.js */
var doc, bod, I, ClockMaker; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
return doc.getElementById(id);
}
ClockMaker = function(output, offset){
this.clocks = [];
var t = this;
function out(a){
var o = a[1] || 0, dt = new Date(3600000*o+Date.now());
a[0].innerHTML = dt.toUTCString();
}
setInterval(function(){
t.clocks.forEach(out);
}, 10);
this.clock = function(output, offset){
this.clocks.push([output, offset]);
return this;
}
}
var clocks = new ClockMaker;
clocks.clock(I('ny'), -5).clock(I('zu'));
}); // end load
//]]>
/* css/external.css */
html,body{
box-sizing:border-box; padding:0; margin:0;
}
h2{
margin:5px 7px;
}
h2,h2+div{
display:inline-block;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Simple Clock</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div><h2>New York:</h2><div id='ny'></div><div>
<div><h2>Zulu:</h2><div id='zu'></div></div>
</body>
</html>
您可以访问 dt
以使用其他 UTC 方法。
JavaScript 正在尝试为 html 制作一个时钟,但不知道哪里坏了。
这个 js 时钟在 Sharepoint 网站上运行良好,但我试图在本地文件上实现它,但它不知何故在途中中断了。我正在尝试使用 getElementById
查找 <span id>
并将文本更改为当前时间。我不能说到底是什么坏了。
谢谢你看一看。 Original JSFiddle, Updated JSFiddle。
更新:我试图整理代码,现在它给了我一个 false
输出,而不是空白 <span>
。所以我想你可以说取得了进展。我仍然不完全知道哪里坏了,但探索仍在继续!
更新 2:感谢 StackSlave,做了一些格式化,这里是 Final JSFiddle,它在 Chrome 中工作得很好,但 JSFiddle 不太喜欢它。感谢所有帮助过我的人。
window.addEventListener('load', Elements, false);
window.addEventListener('load', getElement, false);
window.addEventListener('load', worldClock, false);
function Elements() {
getElement("Zulu", worldClock(0, "NODST") );
getElement("NewYork", worldClock(-9, "NAmerica"));
setTimeout(Elements, 1e3);
}
function getElement(Id, time) {
var a = document.getElementById(Id);
if (a)
a.innerHTML = time;
else {
return
}
}
function worldClock(offset, timezone){
var common = 0;
a = new Date(new Date().getTimezoneOffset() * 6e4);
getDate = a.getDate();
getMonth = a.getMonth();
getYear = a.getYear();
return a.getYear < 1e3 && (a.getYear += 1900);
monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"],
getYear % 4 == 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
getYear % 100 == 0 && getYear % 400 != 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
w = 0,
offset != 0 && offset % 1 != 0 && (w = offset % 1 * 60),
l = a.getMinutes() + w,
l > 59 ? (e = a.getHours() + Math.floor(n) + 1,
l -= 60) : e = a.getHours() + Math.floor(n),
y = a.getSeconds(),
e >= 24 && (e = e - 24,
s -= -1),
e < 0 && (e -= -24,
s -= 1),
e < 10 && (e = " " + e),
l < 10 && (l = "0" + 1),
y < 10 && (y = "0" + y),
s <= 0 && (0 == 0 ? (o = 11,
getYear -= 1) : o = o - 1,
s = days[0]),
s > days[0] && (s = 1,
o == 11 ? (o = 0,
getYear -= 1) : o -= -1),
t == "NODST" && (c = 0),
t == "NAmerica" && (u = new Date(),
i = new Date(),
u.setMonth(2),
u.setHours(2),
u.setDate(13),
f = u.getDay(),
f != 0 ? u.setDate(8 - f) : u.setDate(1),
i.setMonth(9),
i.setHours(1),
i.setDate(31),
f = i.getDay(),
i.setDate(31 - f),
r = new Date(),
r.setMonth(o),
r.setYear(h),
r.setDate(s),
r.setHours(e),
r >= u && r < i && (c = 1));
}
<html>
<head>
<script type="text/jscript" src="./clock.js"></script>
</head>
<body>
<div class="clock">
New York:
<span id="NewYork"> </span>
Zulu:
<span id="Zulu"> </span>
</div>
</body>
</html>
从一开始设置超时时,您就使用小写 "time" 作为回调,它不是函数,但由于“()”
而返回值setTimeout(time(), 1e3);
如果我理解的好的话应该是:
setTimeout(Time, 1e3);
也许让它工作还不够,但肯定足以让它不工作。
你的代码完全不可读,你绝对应该重新考虑你的变量命名和结构。浏览它有两件事:
- 您不是通过 returning 逗号分隔的表达式列表来 returning 列表。 comma operator 仅 return 是列表中的最后一个值,因此
worldClock
将 returnr >= u && r < i && (c = 1))
- 您没有将
Time
函数的引用传递给setTimeout
,您传递的是函数调用的结果。你是说setTimeout(Time, 1e3)
- 函数名为
Time
,您正在尝试setTimeout
和time
。 JS区分大小写,将你的函数重命名为time
不过,如果该函数有效,我会感到惊讶,根据我的经验,不可读的代码是不可靠的代码。但是试试看,告诉我它是否有效!祝你好运!
让我们保持简单:
//<![CDATA[
/* js/external.js */
var doc, bod, I, ClockMaker; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
return doc.getElementById(id);
}
ClockMaker = function(output, offset){
this.clocks = [];
var t = this;
function out(a){
var o = a[1] || 0, dt = new Date(3600000*o+Date.now());
a[0].innerHTML = dt.toUTCString();
}
setInterval(function(){
t.clocks.forEach(out);
}, 10);
this.clock = function(output, offset){
this.clocks.push([output, offset]);
return this;
}
}
var clocks = new ClockMaker;
clocks.clock(I('ny'), -5).clock(I('zu'));
}); // end load
//]]>
/* css/external.css */
html,body{
box-sizing:border-box; padding:0; margin:0;
}
h2{
margin:5px 7px;
}
h2,h2+div{
display:inline-block;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Simple Clock</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div><h2>New York:</h2><div id='ny'></div><div>
<div><h2>Zulu:</h2><div id='zu'></div></div>
</body>
</html>
您可以访问 dt
以使用其他 UTC 方法。