秒表设计-setInterval定时器的使用

最新推荐文章于 2025-05-29 23:26:41 发布

原创最新推荐文章于 2025-05-29 23:26:41 发布 · 539 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个使用HTML、CSS及JavaScript实现的实时显示当前时间的钟表案例。该案例通过设置DOM元素样式来呈现时间，并利用JavaScript定时更新时间显示，确保时间准确性。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    .clock{
        width:200px;
        height:50px;
        background: #000;
        color:#0f0;
        font-weight:bold;
        border-radius:50px;
        text-align:center;
        line-height:50px;
        font-size:30px;
        }
</style>
</head>
<body>
    <div class="clock">
        <span id="sid"></span>
    </div>
</body>

<script>
    function getDate(){
    //初始化
    dobj = new Date();

    //时、分、秒
    hour = dobj.getHours();
        if(hour<10){
            hour='0'+hour;
        }
    minute = dobj.getMinutes();
        if(minute<10){
            minute='0'+minute;
        }
    second = dobj.getSeconds();
        if(second<10){
            second='0'+second;
        }

    //弹出时间
    str =hour+':'+minute+':'+second;
    sidobj = document.getElementById('sid');
    sidobj.innerHTML=str;
    }

    //先调用一次，才不会出现刷新的时候时间延迟的现象
    getDate();

    //定时器执行
    setInterval(function(){
        getDate();
    },1000);

</script>