html显示时间,并且实时刷新

<!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 class="box"></div>
    <script>
        function getTime() {
            var date = new Date();
            var year = date.getFullYear(); //获取年份
            var month = date.getMonth() + 1; //获取月份
            var day = date.getDate(); //获取日期
            var hour = date.getHours(); //获取小时
            hour = hour < 10 ? '0' + hour : hour;
            var minute = date.getMinutes(); // 获取分
            minute = minute < 10 ? '0' + minute : minute;
            var seconds = date.getSeconds(); //获取秒
            seconds = seconds < 10 ? '0' + seconds : seconds;
            return year + '年' + month + '月' + day + '日&nbsp;' + hour + ':' + minute + ':' + seconds;
        }

        setInterval(function() {
            document.querySelector('.box').innerHTML = getTime();
        }, 1000)
    </script>
</body>

</html>

在设置时分秒时,我们使用了三目运算符,来判断当前的时分秒是否是小于10,如果小于10,那么我们就在前面补个0。

注意:我们要用setInterval()定时器来设置间隔1秒就刷新一次,而不用setTimeout(),因为setTimeout()只会调用一次函数,而setInterval()会调用多次。

 

  • 10
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值