Question

此代码段非常适合显示本地时间（每秒更新），即。一个本地时钟。我想修改它以相同的格式显示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');

<div id="date_time"></div>

Answer 1

使用var - 否则您将使用长期存在的属性污染父上下文。
使用window.addEventListener('DOMContentLoaded', fn )而不是盲目地覆盖onload属性。
使用UTC上的Date.prototype功能：
- getFullYear()应为getUTCFullYear()
- getMonth()应为getUTCMonth()
- getDate()应为getUTCDate()
- 等......
使用.textContent代替.innerHTML来设置元素的文本，因为这可以避免昂贵的重新分析。
您不需要将函数名称转换为setTimeout中的字符串，只需直接传递函数即可。如果需要提供参数，请使用Function.prototype.bind返回带有预先提供的参数的新Function对象。
timeout值应为number字面值，而不是字符串。
目前的Javascript编程约定不会将snake_case用于非const标识符，而是使用PascalCase和camelCase。
您不需要所有日期组件的中间变量。
由于月份和日期名称不变，因此它们应位于非本地（伪 - static）变量中。
使用超过500毫秒而不是1000毫秒的超时，因为它是1Hz时钟的奈奎斯特频率并减少滞后。我实际上建议使用16ms的超时来将滞后保持在最小值（因此它会在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'); } )

显示（更新）时钟与UTC时间和日期

1 个答案: