javascript案例2——页面时钟

耶啵奶膘

已于 2022-04-26 18:04:34 修改

阅读量772

点赞数 1

分类专栏： javascript 文章标签：动态时间 JavaScript DOM操作 Date对象 setInterval

于 2022-04-26 17:08:22 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/124432224

版权

javascript 专栏收录该内容

56 篇文章 6 订阅

订阅专栏

一、案例描述

在页面上动态显示当前系统的时间。

二、案例效果演示

在这里插入图片描述

三、案例局部代码

html代码：

<h1></h1>

js代码：

<script>
    setInterval(function() {
        var h1 = document.querySelector('h1');
        var timer = new Date();
        var clock = timer.toLocaleString();
        h1.innerHTML = clock;
    }, 1000);
</script>

四、案例整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面时钟</title>
</head>
<body>
    <h1></h1>
    <script>
        setInterval(function() {
            var h1 = document.querySelector('h1');
            var timer = new Date();
            var clock = timer.toLocaleString();
            h1.innerHTML = clock;
        }, 1000);
    </script>
</body>
</html>