我正在开发一个网页,其中包括一个数字时钟和日期显示.然而,我遇到了一个问题,即数字时钟不会动态更新;它只在页面刷新时更新.下面是我正在使用的相关JavaScript代码:

 function updateDigitalClock() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

       
        hours = (hours < 10) ? '0' + hours : hours;
        minutes = (minutes < 10) ? '0' + minutes : minutes;
        seconds = (seconds < 10) ? '0' + seconds : seconds;

        var digitalClock = document.getElementById('digital-clock');
        digitalClock.innerHTML = hours + ':' + minutes + ':' + seconds;
    }

  
    function updateDate() {
        var now = new Date();
        var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        var dateElement = document.getElementById('date');
        dateElement.innerHTML = now.toLocaleDateString('en-US', options);
    }

有人能帮我确定为什么数字时钟没有动态更新,并提出解决方案吗?

推荐答案

数字时钟不会动态更新的原因是不会重复调用updateDigitalClock和updateDate函数.要解决这个问题,可以使用setInterval函数,该函数以指定的时间间隔重复调用这些函数.将以下代码添加到您的JavaScript中将每秒更新时钟和日期:

setInterval(function() {
        updateDigitalClock();
        updateDate();
    }, 1000);

 updateDigitalClock();
 updateDate();

This ensures that the clock and date display are updated without needing to refresh the page.

Javascript相关问答推荐

我的glb文件没有加载到我的three.js文件中

如何修复循环HTML元素附加函数中的问题?

过滤对象数组并动态将属性放入新数组

被CSS优先级所迷惑

如何修复(或忽略)HTML模板中的TypeScript错误?'

在我的html表单中的用户输入没有被传送到我的google表单中

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

如何将数组用作复合函数参数?

如何在Svelte中从一个codec函数中调用error()?

基于props 类型的不同props ,根据来自接口的值扩展类型

如何根据查询结果重新排列日期

Jexl to LowerCase()和Replace()

使用可配置项目创建网格

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧

正则表达式以确定给定文本是否不只包含邮箱字符串

我如何才能获得价值观察家&对象&S的价值?

如何向内部有文本输入字段的HTML表添加行?

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题

打字脚本中的函数包装键入