JavaScript 试图为 html 做一个时钟，不知道是什么坏了答案

【问题标题】：JavaScript Trying to make a clock for html, can't tell what's brokenJavaScript 试图为 html 做一个时钟，不知道是什么坏了
【发布时间】：2020-03-30 20:51:43
【问题描述】：

JavaScript 试图为 html 做一个时钟，不知道是什么坏了。这个 js 时钟在 Sharepoint 站点上运行良好，但我正在尝试在本地文件上实现它，但它以某种方式中断了。我正在尝试使用getElementById 查找<span id> 并将文本更改为当前时间。我不知道究竟是什么坏了。谢谢你看看。 Original JSFiddle，Updated JSFiddle。更新：我试图整理代码，现在它不是空白的<span>，而是给我一个false 输出。所以我想你可以说取得了进展。我仍然不完全知道是什么坏了，但任务仍在继续！
更新 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>

【问题讨论】：

这段代码真的很糟糕。缩小了吗？

标签： javascript html getelementbyid clock

【解决方案1】：

从一开始设置超时时，你就使用小写的“时间”作为回调，它不是函数，而是因为“（）”而返回值

setTimeout(time(), 1e3);

如果我理解得很好应该是：

 setTimeout(Time, 1e3);

也许让它工作还不够，但肯定不让它工作就足够了。

【讨论】：

我按你说的改了，没有明显效果。
我没有说它会起作用。正如我第一眼看到的那样，变量“monthnames”和后面的所有内容都是在 return 语句之后，返回的是一个布尔值（true/false），也许你说你在页面上看到的那个。我想知道你是否真的需要那个不起眼的 worldClock 函数来实现你想要的。我宁愿阅读日期的文档（例如link）

【解决方案2】：

您的代码完全不可读，您绝对应该重新考虑您的变量命名和结构。浏览它的两件事：

您不会通过返回逗号分隔的表达式列表来返回列表。 comma operator 只返回列表中的最后一个值，所以 worldClock 将返回 r >= u && r < i && (c = 1))
您没有将Time 函数的引用传递给setTimeout，而是传递函数调用的结果。你的意思是setTimeout(Time, 1e3)
函数调用Time，您正在尝试setTimeout 和time。 JS 区分大小写，将你的函数重命名为time

如果该功能有效，我会感到惊讶，根据我的经验，不可读的代码是不可靠的代码。但是试试看，告诉我它是否有效！祝你好运！

【讨论】：

我同意你的观点，因为它不可读，我拉的原始版本更糟。我更正了大写和setTimeout，就像你说的那样，它没有任何明显的效果。我要看看function worldClock 并尝试对其进行排序。感谢@dev 的帮助

【解决方案3】：

让我们保持简单：

//<![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 方法。

【讨论】：