javascript - 当倒计时达到一位数字时对齐数字元素
问题描述
这是一个简单的数字倒计时代码。该代码工作正常,除了一个小烦人的问题。
问题是当我们达到一位数字时,数字和秒字之间会出现一个额外的空格,例如
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>
解决方案
尝试添加这个..它的工作
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 }
}
推荐阅读
- jupyter-notebook - Jupyter 笔记本:如何为 LaTeX 设置 \xlongequal
- http - curl/http 客户端不假设 # 是一个片段
- javascript - 在重置缩放时无法使用 chartjs-plugin-crosshair 返回初始数据集
- angular - ngbNav 包装器组件
- python - 用 Selenium 刮一张桌子并打印出来
- jquery - 鼠标滚轮 - 在垂直和水平滚动之间切换,直到 div 结束
- python - Python Flask 无 Cookie 会话
- reactjs - 如何分组 props 和 propTypes 以减少代码
- python-3.x - python 脚本中“def”行中的 SyntaxError 是什么?
- python - 获取多类张量流预测的概率