如何在javascript中每秒更新日期时间答案

【问题标题】：How to update datetime everysecond in javascript如何在javascript中每秒更新日期时间
【发布时间】：2017-12-02 08:19:12
【问题描述】：

这是我第一次尝试 javascript，我一直在尝试在我的网站上设置一个实时时钟，我得到了时钟以我想要的方式显示时间，但我无法让它每秒自动更新超时命令。我在这里做错了什么？

ps。如果有人知道如何将时间更改为 UTC 时间，那也将不胜感激，不过我仍在努力。

谢谢。

<!DOCTYPE html>
<html>
<head>
<script> 
var date=new Date();
var format = "YYYY-MMM-DD DDD";
document.write(dateConvert(date,format));

function dateConvert(dateobj,format){
 var year = dateobj.getFullYear();
 var month= ("0" + (dateobj.getMonth()+1)).slice(-2);
 var date = ("0" + dateobj.getDate()).slice(-2);
 var hours = ("0" + dateobj.getHours()).slice(-2);
 var minutes = ("0" + dateobj.getMinutes()).slice(-2);
 var seconds = ("0" + dateobj.getSeconds()).slice(-2);
 var day = dateobj.getDay();
 var months = ["1","2","3","4","5","6","7","8","9","10","11","12"];
 var converted_date = "";

switch(format){
 case "YYYY-MM-DD":
  converted_date = year + "-" + month + "-" + date;
  break;
case "YYYY-MMM-DD DDD":
  converted_date = year + "-" + months[parseInt(month)-1] + "-" + date
  + " " + hours + ":" + minutes + ":" + seconds;
  break;
}
return converted_date;
}
</script>
</head>
    <body onload="dataConvert()",timeout(dateConverter,1000)>
</body>
</html>

【问题讨论】：

第一条经验法则。不要使用document.write()。
设置javascript函数setInterval
什么是timeout？
这段代码有很多问题。没有超时之类的东西。 JS 函数称为 setTimeout()。即使使用 setTimeout，它也不会打印任何内容，因为开头只有一个 document.write。如果您在 dateConvert() 函数中移动 document.write，那么它将再次在新行上再次打印日期。您需要一个 div 或一些占位符来显示时间并使用 setTimeout 或 setInterval() 更新内容

标签： javascript html timeout

【解决方案1】：

我会这样做

function updateTimer() { "put your code to format the output here" }

setInterval("updateTimer()", 500)

我会让间隔计时器每 1/2 秒（或更频繁）触发一次，
因为给定的时间间隔只是近似的。如果您使用 1000 毫秒
通话之间的时间可能在 990 到 1010 毫秒（或更宽）之间
并且您可能会在几秒钟内丢失或重复该事件。

如果您更频繁地调用它，您可以将当前时间降低到 Date 变量中的毫秒数，并决定每次要做什么。

【讨论】：

【解决方案2】：

我使用 moment.js 库来简化请求。时钟设置为每隔 1000 毫秒（1 秒）更新一次。

setInterval(function(){
  document.getElementById("clock").innerText = moment().format('MMMM Do YYYY, h:mm:ss a');  
},1000)

http://plnkr.co/edit/eDKBOJUsE1a8aYTzax7g?p=preview

setInterval(function(){
  document.getElementById("clock").innerText = moment.utc().format('MMMM Do YYYY, h:mm:ss a');
},1000)

【讨论】：

还不知道如何使用库，但明天一定会查找并解决并使用它制作最终版本。

【解决方案3】：

所以有一个名为 setInterval 的不错的 javascript 函数（正如 sheplu 已经说过的那样。

因此您几乎可以删除 onload 对象和超时并使用 setInterval。

看起来像这样：

setInterval(function(){
  var date = new Date();
  var format = "YYYY-MMM-DD DDD";
  dateConvert(date,format)
}, 1000);

当然你必须做一些微调，比如 var 格式直接在区间不是最好的，因为它不会改变。

看这里的脚本：https://jsfiddle.net/cv8wLgux/

使用的网站：MozillaDev，W3Schools

【讨论】：

【解决方案4】：

使用 setInterval 函数。 https://developer.mozilla.org/fr/docs/Web/API/WindowTimers/setInterval

不确定，应该尝试，但我认为如果您保持页面打开，您可能会每隔几个小时/几天就失去一些借调。所以你应该不时检查新时间并更新所有内容

【讨论】：

是的，我不希望整个页面刷新，只是日期时间。
关于代码？是的，几乎所有事情都需要以另一种方式完成！但是只是给了他每次 X 次调用某些东西的功能；）这是第二个功能，由他来阅读，尝试并做一些事情！（对不起，只是在控制台输出结果）jsfiddle.net/k2sg8fe1