Javascript 简化设定区间

为了使我的代码更可读、更简单，我在这段代码上绞尽脑汁：

var refresh = setInterval(datumTijd, 1000);

function datumTijd() {
  document.getElementById("tijd1").innerHTML = tijd();
  document.getElementById("tijd2").innerHTML = tijd();
}

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours();
  return hours+ ':' +minutes;
}

虽然这确实有效，但我感觉有一个函数太多了，那就是

document.getElementById

-位，在这里我更新了两个不同的

s。我就是找不到摆脱这个部分的方法，因为我因为

return

code而被卡住了

我的尝试：

var refresh = setInterval(tijd, 1000);

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours();
  return hours+ ':' +minutes;
  document.getElementById("tijd1").innerHTML = d1;
}

---

但是什么也没有回来：（

在将任何内容放入

innerHTML

之前，您正在从函数返回，并且在

innerHTML

中也放入了错误的内容

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours(),
      time = hours+ ':' +minutes;
  document.getElementById("tijd1").innerHTML = time;
  document.getElementById("tijd2").innerHTML = time;
}

我不认为将创建时间字符串的函数与将其放入innerHTML的函数分离有什么问题，就像在原始代码中一样。您可能需要在其他地方获取时间，因此将其分离为自己的函数是值得的。我对原始代码所做的唯一更改是使用变量，而不是调用函数两次：

function datumTijd() {
  var time = tijd();
  document.getElementById("tijd1").innerHTML = time;
  document.getElementById("tijd2").innerHTML = time;
}

您还使用jQuery标记了问题，因此可以通过以下方式简化作业：

function datumTijd() {
    $("#tijd1, #tijd2").text(tijd());
}

---

在将任何内容放入

innerHTML

之前，您正在从函数返回。在

innerHTML

中也放入了错误的内容

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours(),
      time = hours+ ':' +minutes;
  document.getElementById("tijd1").innerHTML = time;
  document.getElementById("tijd2").innerHTML = time;
}

我不认为将创建时间字符串的函数与将其放入innerHTML的函数分离有什么问题，就像在原始代码中一样。您可能需要在其他地方获取时间，因此将其分离为自己的函数是值得的。我对原始代码所做的唯一更改是使用变量，而不是调用函数两次：

function datumTijd() {
  var time = tijd();
  document.getElementById("tijd1").innerHTML = time;
  document.getElementById("tijd2").innerHTML = time;
}

您还使用jQuery标记了问题，因此可以通过以下方式简化作业：

function datumTijd() {
    $("#tijd1, #tijd2").text(tijd());
}

---

当您执行

return

时，它将结束函数。将其更改为变量赋值，然后将其放入

innerHTML

中。我实际上认为您的两个函数是有意义的，您甚至可以创建一个设置元素内部html的第三个函数；）不完全相关，但这些三元运算符看起来很糟糕。您可以使用

substr

添加前导零，例如

hours=（'0'+d1.getHours（））.substr（-2）

@Barmar感谢您在

返回中的解释@蒂姆，谢谢你提醒我。我刚刚开始在这里和那里学习一些js，所以我已经很惊讶，我实际上已经完全走上了正轨。我会把你的意见写在黑板上！执行
return
时，函数结束。将其更改为变量赋值，然后将其放入
innerHTML
。实际上，我认为您的两个函数是有意义的，您甚至可以创建一个设置元素内部html的第三个函数；）不完全相关，但那些三元运算符看起来很糟糕。您可以使用
substr
添加前导零，例如
hours=（'0'+d1.getHours（））.substr（-2）
@Barmar感谢您在
返回中的解释@蒂姆，谢谢你提醒我。我刚刚开始在这里和那里学习一些js，所以我已经很惊讶，我实际上已经完全走上了正轨。我会把你的意见写在黑板上！它可以始终使用名为
function setHtml（selector，value）{（document.querySelectorAll（selector）| |[]）的额外方法。forEach（function（item）{item.innerHTML=value；}）}
或此操作的更简单形式；）（每次当
'use strict'
设置在某个地方时，当然：D）感谢您对Barmar的编辑，实际上我正准备在google上搜索这部分内容，但现在不需要了！它可以始终使用名为
function setHtml（selector，value）{（document.querySelectorAll（selector）| |[]）的额外方法。forEach（function（item）{item.innerHTML=value；}）}
或此操作的更简单形式；）（每次当
'use strict'
设置在某个地方时，当然：D）感谢您对Barmar的编辑，实际上我正准备在google上搜索这部分内容，但现在不需要了！