javascript進行文字更新時會跳動?

筆者在製作計時器過程中發現，javascript在更新時數字會有跳動的情形 ，如下所示

影片程式前情提要：上述影片中每一個時間的數字都是放在一個span裡面，而筆者每隔0.01秒就更新一次span裡面的數字值。

從影片中可以發現當文字在進行更新時，文字的寬度會隨之縮小，後來發現問題是，span標籤的寬度會隨著數字大小而放大縮小，可以發現當數字為1或7時，span之邊框會有縮小的現象，因此解決方法就是將span之邊框做固定(程式碼如下所示)，所以筆者就設定span的大小並加上display:inline-block;這個指令[1]固定住span的大小就可以解決此問題。

<style>       
    span{
            display:inline-block;
            position: relative;
            right:50px;
            width: 30px;
        }
</style>

[1]https://ytclion.medium.com/css%E6%95%99%E5%AD%B8-%E9%97%9C%E6%96%BCdisplay-inline-inline-block-block%E7%9A%84%E5%B7%AE%E5%88%A5-1034f38eda82

[實作]https://prfengnewtools.com/clock-3/