点击按钮显示时间

本文介绍了一个简单的网页应用,通过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获取的是星期几

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值