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元素的大小将调整为文本的宽度

倒数达到一位数字时对齐数字元素

2 个答案: