在专有软件中对Javascript进行日期/时间自动更新

在专有软件中对Javascript进行日期/时间自动更新,javascript,html,datetime,Javascript,Html,Datetime,我正在使用专有软件创建一个页面,我需要显示其他内容,主要是暖通空调控制日期和时间。该软件有一个自定义html块,并注明此内容将保存在和标记内的单独html文件中,我将代码放入其中 经过一些研究,我不是一名编码员,主要从事复制粘贴,我粘贴到上述块中的代码如下: <script language="javascript"> var t = new Date(); document.write(t.toDateString()+""+t.getHours()+":"+t

我正在使用专有软件创建一个页面,我需要显示其他内容,主要是暖通空调控制日期和时间。该软件有一个自定义html块,并注明此内容将保存在和标记内的单独html文件中,我将代码放入其中

经过一些研究,我不是一名编码员,主要从事复制粘贴,我粘贴到上述块中的代码如下:

<script language="javascript"> 
    var t = new Date(); 
    document.write(t.toDateString()+""+t.getHours()+":"+t.getMinutes()); 
</script>
这让我非常接近我想要的日、月、日、年、时间。我希望我能得到AM/PM,但我主要想要的是自动更新日期/时间,这样用户在得到准确的打印输出之前就不需要刷新页面

虽然我在这个网站上看到了很多关于自动更新时间/日期的帖子,但我不知道如何将它们与我正在使用的系统集成,我已经在这个网站上工作了一段时间,所以我想我应该结合我正在使用的环境来问这个问题

setInterval(function(){
    var t = new Date(); 
    document.write(t.toDateString()+""+t.getHours()+":"+t.getMinutes()); 
}, 1000);
将每秒运行一次脚本,不幸的是,这并不能摆脱旧的时间,因此我建议使用一个占位符,您可以像html span元素一样进行更新

<span id="time"></span>
<script>
setInterval(function(){
        var t = new Date(); 
        document.getElementById("time").innerHTML =
            (t.toDateString()+""+t.getHours()+":"+t.getMinutes()); 
    }, 1000);
</script>
现在,你的时钟需要一些格式化,因为现在,如果时间是11:05,它显示11:5。我会查一查


希望这能在您的系统中起作用。

这不是您想要的确切格式,但提供了实现所需的不同方式。通过一些字符串操作,您可以实现同样的效果。如果您可以共享您想要显示的确切格式,我可以修改解决方案

使用setTimeout或setInterval连续更改用户屏幕通常会导致布局抖动,这是浏览器版的心跳骤停,在用户屏幕实际能够显示更改之前,它被迫执行不必要的页面回流。这是非常糟糕的,因为页面回流的性质很累人,特别是在问题最明显的移动设备上,页面负载和电池消耗都很糟糕

正是由于上述原因,才引入了requestAnimationFrame。简而言之,该方法允许您在下一次可用的屏幕重新绘制时执行代码,从而避免了猜测工作与用户的浏览器和硬件同步以对屏幕进行更改。当我们反复调用requestAnimationFrame来创建屏幕更新时,我们可以确信,当用户的计算机实际准备每次对屏幕进行更改时,就会调用更新代码,从而实现更平滑、更高效的更新。此外,通过requestAnimationFrame调用并在浏览器的后台选项卡中运行的代码会被暂停或显著降低到每秒2帧或更少的速度,以进一步节省用户系统资源-运行屏幕更新没有意义,因为看不到

函数更新时间{ var time=新日期。ToLocalString{ 小时12:是的, }; getElementById'current_time'。innerHTML=time; requestAnimationFrameupdateTime; };
在线上有很多脚本,甚至在StackOverflow上,你只需要做1个。找到它2。使用它am pm javascript时钟将是一个很好的起点……哦,第一个只是不断编写新的显示,这绝对不是我想要的。至于第二个,这是取代了我上面发布的全部内容,还是在javascript标签之间滑动?@JoeTrane如果我理解正确,这将取代EntityGreat,它现在正在更新!我只需要摆弄一下适当间距、前导零和AM/PM的格式。谢谢,伙计!请添加一些解释,说明此代码为何/如何帮助OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息,请参阅。@MikeMcCaughan希望这有助于: