显示（更新）带有 UTC 时间和日期的时钟答案

【问题标题】：Display (an updating) clock with UTC time and date显示（更新）带有 UTC 时间和日期的时钟
【发布时间】：2018-02-28 05:35:09
【问题描述】：

此代码 sn-p 非常适合显示本地时间（每秒更新一次），即。本地时钟。我想修改它以以相同的格式显示 UTC/GMT 时间。任何意见将不胜感激。

本地时钟 Javascript 和 HTML：

function date_time(id) {
  date = new Date;
  year = date.getFullYear();
  month = date.getMonth();
  months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
  d = date.getDate();
  day = date.getDay();
  days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
  h = date.getHours();
  if (h < 10) {
    h = "0" + h;
  }
  m = date.getMinutes();
  if (m < 10) {
    m = "0" + m;
  }
  s = date.getSeconds();
  if (s < 10) {
    s = "0" + s;
  }
  result = '' + days[day] + ' ' + months[month] + ' ' + d + ' ' + year + ' ' + h + ':' + m + ':' + s;
  document.getElementById(id).innerHTML = result;
  setTimeout('date_time("' + id + '");', '1000');
  return true;
}

window.onload = date_time('date_time');

&lt;div id="date_time"&gt;&lt;/div&gt;

【问题讨论】：

你的函数没有返回函数所以你需要window.onload = function() { date_time('date_time'); }
还将数组移出函数。无需每秒创建它们
function pad(num) { return ("0"+num).slice(-2) }

标签： javascript clock utc

【解决方案1】：

使用var - 否则您将使用长寿命属性污染父上下文。
使用window.addEventListener('DOMContentLoaded', fn ) 而不是盲目地覆盖onload 属性。
在Date.prototype 上使用UTC 函数：
- getFullYear() 应该是 getUTCFullYear()
- getMonth() 应该是 getUTCMonth()
- getDate() 应该是 getUTCDate()
- 等等……
使用.textContent 而不是.innerHTML 来设置元素的文本，因为这样可以避免代价高昂的重新解析。
setTimeout中不需要将函数名转换成字符串，直接传递函数即可。如果您需要提供参数，请使用 Function.prototype.bind 返回一个带有预提供参数的新 Function 对象。
timeout 值应该是 number 文字，而不是字符串。
当前的 Javascript 编程约定不使用 snake_case 作为非常量标识符，而是使用 PascalCase 和 camelCase。
您不需要所有日期组件的中间变量。
由于月份和日期名称是常量，它们应该位于非本地（伪static）变量中。
使用 500 毫秒而不是 1000 毫秒的超时，因为它是 1Hz 时钟的奈奎斯特频率并减少延迟。实际上，我建议使用 16 毫秒的超时来将延迟降至最低（因此它会在 60Hz 显示器上每帧更新一次，并减轻浏览器 JavaScript 调度程序中的时钟抖动）。

我会这样做：

var months = [ "January", "February", "March", ... ];
var days   = [ "Sunday", "Monday", "Tuesday" ... ];

function updateClock( elementId ) {

    var dt = new Date();

    var h = dt.getUTCHours().toString();
    h = h.length == 1 ? '0' + h : h;

    var m = dt.getUTCMinutes().toString();
    m = m.length == 1 ? '0' + m : m;

    var s = dt.getUTCSeconds().toString();
    s = s.length == 1 ? '0' + s : s;

    var result = days[ dt.getUTCDaty ] + ' ' + months[ dt.getUTCMonth() ] + ' ' + dt.getUTCFullYear() + ' ' + h + ':' m + ':' + s;
    document.getElementById( elementId ).textContent = result;

    setTimeout( updateClock.bind( this, elementId ), 100 );
}

window.addEventListener( 'DOMContentLoaded', function(e) { updateClock('date_time'); } )

【讨论】：