JS 浏览器网页显示跳动的时间代码

本文展示了如何使用JavaScript在浏览器中创建一个动态跳动的时间显示。通过获取当前日期和时间,结合CSS样式,使得时间以红色60号字体在页面中央显示,并每秒更新一次。代码中包含了添加零到个位数的辅助函数,以确保时间始终显示两位数。

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

效果如下图



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
    body{
margin-left: 300px;
        margin-top: 200px;
       font-size: 60px;
        color: red;

    }
</style>
</head>
<body>
<div id="timebox"></div>
<script>
    var box = document.getElementById("timebox");
    var time = "";
    //调用
    function showtime(){
        var dd= new Array("","","","","","","");
        var d = new Date();
        //年月日
        time = d.getFullYear()+":";
        time += d.getMonth()+1+":";
        time += d.getDate()+" ";
        //星期几
        time +="  星期"+dd[d.getDay()]+"  ";
        //时 分
        time += addzero(d.getHours())+":";
        time += addzero(d.getMinutes())+":";
        time += addzero(d.getSeconds());
        //显示
//            window.status = time;
        box.innerHTML = time;
    }
    //隔一秒钟调用一次
//    这个隔一秒只执行一次

//    setTimeout(showtime,1000);
    setInterval(showtime,1000)
    //确保显示两位数字
    function addzero(i){
        if(i<10){
            return "0"+i;
        }
        return i;
    }
</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值