纯JS实现动态时间显示代码

以下是一个使用纯JavaScript实现的动态时间显示代码示例。这段代码会创建一个`

`元素来显示当前时间，并且每秒更新一次时间显示。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态时间显示</title>
<script>
    window.onload = function() {
        // 创建一个div元素用于显示时间
        var timeDisplay = document.createElement('div');
        timeDisplay.id = 'timeDisplay';
        timeDisplay.style.fontSize = '24px'; // 可选：设置字体大小
        document.body.appendChild(timeDisplay); // 将div添加到body中

        // 更新时间的函数
        function updateTime() {
            var now = new Date(); // 获取当前时间
            var hours = now.getHours(); // 获取小时
            var minutes = now.getMinutes(); // 获取分钟
            var seconds = now.getSeconds(); // 获取秒

            // 如果小时、分钟或秒小于10，则在其前面添加一个0
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            // 设置div的文本为当前时间
            timeDisplay.textContent = hours + ':' + minutes + ':' + seconds;
        }

        // 每秒调用一次updateTime函数来更新时间显示
        setInterval(updateTime, 1000);
    }
</script>
</head>
<body>
</body>
</html>

将上述代码保存为HTML文件并在浏览器中打开，您将看到一个`

`元素，其中实时显示当前时间，并且每秒更新一次。这个实现仅使用了JavaScript的`Date`对象、`setInterval`函数和DOM操作，完全符合纯JavaScript的要求。