javascript - 当倒计时到达一位数字时对齐数字元素

Question

这是一个简单的数字倒计时代码。除了一个烦人的小问题外，代码工作正常。

问题是当我们达到一位数字时，数字和秒字之间会出现额外的空格，例如

9 Seconds 而不是 9 Seconds 的预期结果。

我已经尝试在 CSS 和 HTML 代码中设置文本对齐方式，但似乎无法解决问题!

// get HTML ids we need
let counterUpperText = document.getElementById("counterUpperText");
let secondsUpperText = document.getElementById("secondsUpperText");


// create countdown number
let timeleft = 14;
  counterUpperText.innerHTML = `${timeleft}`;
  upperTextAnimeShow(counterUpperText);
  
let savedTimer = setInterval(function(){
  //console.log(timeleft);
  timeleft--;
  counterUpperText.innerHTML = `${timeleft}`;
  
  if(timeleft <= 0){
    clearInterval(savedTimer);
    console.log("done");
    secondsUpperText.innerHTML = ``;
    counterUpperText.innerHTML = `Done!`;
 
    return;
  }
  
}, 1000);

// create animations

    upperTextAnimeShow(counterUpperText);

    upperTextAnimeHide(secondsUpperText);
    upperTextAnimeShow(secondsUpperText);
    
    secondsUpperText.innerHTML = `Seconds`;



// animation functions
function upperTextAnimeShow(el){
     el.classList.add("upperTextAnimeShow");
     el.classList.remove("upperTextAnimeHide");
};

function upperTextAnimeHide(el){
     el.classList.remove("upperTextAnimeShow");
     el.classList.add("upperTextAnimeHide");
};

.upperTextContainer{
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 40vh;
    height: 16vh;
    width: 29vw;   
    /*outline: 0.1vw dashed orange;*/
}

.upperTexts{
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 2vw;
    color: rgb(215, 215, 215);
    left: 0.4vw;
    opacity: 0;
   
}

#secondsUpperText{
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 2vw;
    color: rgb(215, 215, 215);
    left: 3.4vw;
    opacity: 0;

}

.upperTextAnimeShow {
    animation: upperTextShow 0.3s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: forwards ;
}

.upperTextAnimeHide {
    animation: upperTextHide 0.3s ease-in-out;  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes upperTextShow {
  0%    { opacity: 0; top: 10vh }
  100%  { opacity: 1; top: -8vh }
}

@-webkit-keyframes upperTextHide {
   from { opacity: 1; top: -8vh }
   to   { opacity: 0; top:  10vh }
}

<div class = "upperTextContainer">
 <p id="counterUpperText" class="upperTexts" style="text-align: right;"></p>
 <p id="secondsUpperText" class="upperTexts"></p>
</div>

Answer 1

尝试添加这个..它的工作

CSS

.upperTextContainer{
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 40vh;
    height: 16vh;
    width: 29vw;   
    display:flex;
    justify-content:center;
    /*outline: 0.1vw dashed orange;*/
}

.upperTexts{
    position: static;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 2vw;
    color: rgb(215, 215, 215);
    left: 0.4vw;
    opacity: 0;

}

#secondsUpperText{
    position: static;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 2vw;
    color: rgb(215, 215, 215);
    left: 3.4vw;
    opacity: 0;
    margin-left:3px;

}

.upperTextAnimeShow {
    animation: upperTextShow 0.3s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: forwards ;
}

.upperTextAnimeHide {
    animation: upperTextHide 0.3s ease-in-out;  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes upperTextShow {
  0%    { opacity: 0; top: 10vh }
  100%  { opacity: 1; top: -8vh }
}

@-webkit-keyframes upperTextHide {
   from { opacity: 1; top: -8vh }
   to   { opacity: 0; top:  10vh }
}