点击按钮显示时间

最新推荐文章于 2023-02-23 10:27:14 发布

原创最新推荐文章于 2023-02-23 10:27:14 发布 · 3k 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的网页应用，通过JavaScript实现网页上实时显示当前时间的功能。该应用利用了Date对象来获取并更新时间，同时使用了setInterval函数确保时间能够每秒自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮显示时间</title>
    <script>
        function displayTime(){
            fnDate(); //如果不先执行一次fnDate()，点击按钮之后会等一秒才显示时间
            setInterval(function() {
                fnDate();
            },1000)
        }

        function fnDate() {
            var oPara = document.getElementById("demo");
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var time = year+ "-"+ fnW(month+1) + "-"+ fnW(day)+ " "+ fnW(hour)+ ":"+ fnW(minute)+ ":"+ fnW(second)
            oPara.innerHTML = time;
        }

        function fnW(str) {
            var num ;
            str >= 10? num = str: num = "0" +str ;
            return num;
        }
    </script>
</head>
<body>
<div>
    <p id="demo">这里显示时间</p>
    <button type="button" onclick="displayTime()">点我看时间</button>
</div>
</body>
</html>
如果想打开页面就直接显示时间，要用window.onload

window.onload = function() {
    setInterval(function () {
        fnDate();
    }, 1000);

Tip:getDay获取的是哪日，getDate获取的是星期几