當倒計時達到一位數時對齊數字元素

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 }
}

Answer 2

#counterUpperText沒有width ，它與容器的左側對齊。

當您達到 1 位數字時， p#counterUpperText元素將調整為文本的寬度