js中SetInterval与setTimeout用法-优快云博客

本文介绍了一个使用HTML和JavaScript实现的自动更新显示当前时间的时钟示例。该时钟每秒刷新一次，显示小时、分钟、秒以及日期。

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

转自：https://www.cnblogs.com/mercy/articles/2424882.html

下面的例子为：设置一个可以自动更新的时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clock</title>
    <style>
    body{
        /* background-image: url(http://thumbs.dreamstime.com/z/%E9%BB%91%E8%89%B2%E6%97%B6%E9%92%9F%E9%87%91%E5%AD%90%E6%96%B0?-%E5%BA%A6-16817867.jpg); */
    background-image: url(http://pic.58pic.com/58pic/13/76/89/49h58PIC8sV_1024.jpg);
    }
    #time{
        font-size: 70px;
        color:white;
        margin: 400px auto;
        text-align: center;
    }
    </style>
    <script>
    // var now=new Date();
    // document.writeln(now.getDate()+"<br>");
    // document.write(now.getDay()+"<br>");
    // document.write(now.toLocaleTimeString()+"<br>");
    // document.write(now.toTimeString()+"<br>");
    // document.write(now.toLocaleDateString()+"<br>");
    // document.write(now.toLocaleString()+"<br>");
    // document.write(now.toString()+"<br>");
    // document.write(now.getFullYear()+"<br>");
    // now.setHours(10);
    // // document.write(+"<br>");
    // document.write(now.getHours()+"<br>");
    // // now.now
    // document.write(now+"<br>");
    setTimeout(showTime);
    function showTime(){
    var time = new Date();
    document.getElementById("time").innerHTML=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+"<br>"+time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日";//
    }
    setInterval(showTime,1000);
    </script>
</head>
<body>
        <div id="time">

        </div>

</body>
</html>