Clearly put the timer, why the string will not be automatically updated?

Hello, everyone. I am a rookie who has just taught myself JS for a few days. The question is very childish, please give me your advice.

requirement: a clock that is updated every second, such as: 08-21-21-29, with zeros in front of the digits.
my idea is to first get the hours, minutes, and seconds of time, and then convert them into strings, then correspond the subscript of the string to the subscript of the array of digital images, and then get a setInterval to execute every other second. The effect of
now is shown in the figure:
this effect looks normal at first glance, but it does not update the image automatically. Later, I used alert to output the time string and found that the timer was normal, but each time the output time was manually refreshed. When the timer was clearly put, why wouldn"t the time string be updated automatically? The
code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .float{
            float: left;
            margin: 0 10px;
            font-size: 30px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var imgs=document.getElementsByTagName("img");
            var timeSting=null;
            var now=new Date();
            setInterval(function(){
                function add0(h,min,s) {
                var n="0";
                    for (var i = 0; i <3; iPP) {
                        if (arguments[i]<10) {
                            arguments[i]=n+arguments[i];
                        } 
                    }
                    return h+min+s;
            }
            timeSting=add0(now.getHours(),now.getMinutes(), now.getSeconds());
                for (var i = 0; i < 6; iPP) {
                     imgs[i].src="./number/"+timeSting[i]+".gif";
                }
            },1000);     
        }
    </script>
</head>
    <body>
        <img class="float" src="">
        <img class="float" src="">
        <div class="float">:</div>
        <img class="float" src="">
        <img class="float" src="">
        <div class="float">:</div>
        <img class="float" src="">
        <img class="float" src="">
    </body>
</html>
Feb.22,2022

add a print statement

clipboard.png

,

clipboard.png

just put the sentence now=new Date (); in the timer

.

what you take inside the timer is the now, declared outside the timer so that the now will not change. You should declare that the timer code inside the timer


your timer code will be executed automatically once a second, but note that starts from the function inside the timer . Because you don't declare the latest current time in the timer, you just get the time outside the timer, so the timer doesn't get a new current time until your page is refreshed.

Menu