[js] 定时器demo 电子时钟

最新推荐文章于 2023-12-09 11:08:42 发布

533_

最新推荐文章于 2023-12-09 11:08:42 发布

阅读量214

点赞数

分类专栏： # js

本文链接：https://blog.csdn.net/qq_14993591/article/details/120276874

版权

JavaScript 实时更新 DOM操作定时器电子时钟

关键词由CSDN通过智能技术生成

js 专栏收录该内容

158 篇文章 2 订阅

订阅专栏

<!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>Document</title>
</head>
<body>
    <div>当前是XX年XX月XX日 星期X XX点XX分XX秒</div>

    <script src="tools.js"></script>
    <script>
        // 获取div标签对象
        var oDiv = document.querySelector('div');

        // 定时器 第一次执行 是在 时间间隔后
        // 也就是 第一次执行 是在 1秒之后
        // 在 定时器外 先执行一次程序 确保 页面打开 程序就会被执行
        t();
        


        // 通过定时器 每秒执行一次程序
        // setInterval(function(){
        //     // 每一秒执行所有的程序
        //     // 获取当前时间 将 时间 写入到 div标签中
        //     t();       
        // }, 1000);

        setInterval( t , 1000 );


        function t(){
            // 通过函数获取当前时间对象的数据
            var timeObj = myGetTime();
            console.log( timeObj );
            // 将对象中的数据写入到div标签对象中
            oDiv.innerHTML = `当前是${timeObj.year}年${timeObj.month}月${timeObj.day}日 ${timeObj.week} ${timeObj.hours}点${timeObj.minutes}分${timeObj.seconds}秒`;       
        }
        
    </script>


    <script>
        /*
            电子时钟demo

            使用函数 获取当前时间的时间对象数据
            写入 div标签中

        */
    </script>
</body>
</html>