前端开发必备（七）-------实时显示系统时间

最新推荐文章于 2024-04-29 10:35:43 发布

ThinkPet

最新推荐文章于 2024-04-29 10:35:43 发布

阅读量2k

点赞数

分类专栏： WEB前端文章标签：实时显示系统时间

本文链接：https://blog.csdn.net/ThinkPet/article/details/81783037

版权

WEB前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实时显示系统时间</title>
    <script>
        function getLongDate() {
            //创建当前系统时间的Date对象
            var dateObj = new Date();
            //获取完整年份值
            var year = dateObj.getFullYear();
            //获取月份
            var month = dateObj.getMonth() + 1;
            //获取月份中的日
            var date = dateObj.getDate();
            //获取星期值
            var day = dateObj.getDay();
            var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            //根据星期值，从数组中获取对应的星期字符串
            var week = weeks[day];
            //获取小时
            var hour = dateObj.getHours();
            //获取分钟
            var minute = dateObj.getMinutes();
            //获取秒钟
            var second = dateObj.getSeconds();
            //如果月、日、时、分、秒的值小于10，在前面补0
            if (month<10) {
                month="0"+month;
            }
            if (date<10) {
                date="0"+date;
            }
            if (hour<10) {
                hour="0"+hour;
            }
            if (minute<10) {
                minute="0"+minute;
            }
            if (second<10) {
                second="0"+second;
            }
            var newDate=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minute+":"+second;
            document.getElementById("dateStr").innerHTML="系统公告:["+newDate+"]";
            setTimeout("getLongDate()",1000);//每隔一秒重新调用一次该函数
            /*
                在实时显示系统时间时，还可以使用window对象的setIntervar()方法，
                setIntervar()方法类似于setTimeout()方法。
                不同之处是调用window对象的setIntervar()方法后，
                会一直执行setIntervar()方法所调用的JavaScript方法，
                而setTimeout()方法只能被执行一次。
                如果要通过setTimeout()方法一直执行某个JavaScript方法，
                setTimeout()必须写在被调用的JavaScript方法体内

            */
        }
    </script>
</head>

<body onload="getLongDate()">
    <div id="dateStr" ></div>
</body>

</html>

ThinkPet

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发必备（七）-------实时显示系统时间

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫