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

最新推荐文章于 2022-04-25 16:43:41 发布

没有风雨怎能远方

最新推荐文章于 2022-04-25 16:43:41 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： javascript 跳动的时间浏览器

本文链接：https://blog.youkuaiyun.com/yyf0409/article/details/74936251

WEB前端专栏收录该内容

26 篇文章

订阅专栏

本文展示了如何使用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>