时间戳

首页 > 解决方案 > 由于 javascript 文本更新导致文本移动，我该如何解决？

javascript - 由于 javascript 文本更新导致文本移动，我该如何解决？

问题描述

我正在自己做一些练习。我创建了这个由这个函数更新的简单页面

function today(){    
    hoje = Date();  

    switch (hoje.slice(0,3)) {
        case 'Mon' :
            todayIs = 'Monday';
        break;

        case 'Tue' :
            todayIs = 'Tuesday';
        break;

        case 'Wed' :
            todayIs = 'Wednesday';
        break;

        case 'Thu' :
            todayIs = 'Thursday';
        break;

        case 'Fri' :
            todayIs = 'Friday';
        break;

        case 'Sat' :
            todayIs = 'Saturday';
        break;

        case 'Sun' :
            todayIs = 'Sunday';
        break
    }

    todayInFunction = new Date;
    hours = todayInFunction.getHours();
    if (hours < 10 && hours < 12){
        hours = `0${hours} AM`;
    } else{
        hours = hours + 'PM';
    }
    minutes = todayInFunction.getMinutes();
    minutes < 10 ? minutes = '0' + minutes : false; 
    
    seconds = todayInFunction.getSeconds();
    seconds < 10 ? seconds = '0' + seconds : false;
    
    console.log(`Current time is: ${hours} : ${minutes} : ${seconds}`);
    
    printHere = document.getElementById("print-here");
    printHere.innerHTML = `Today is ${todayIs} <br> Current time is: ${hours} : ${minutes} : ${seconds}`;
}

    setInterval(
        () => {
            today()
        }, 1000
    )

问题是由于文本内容正在更新，文本每秒都会抖动。有什么 CSS 技巧可以用来解决这个问题吗？ 在此处输入图像描述

标签： javascriptcssshake

解决方案

我不知道你能不能做到这一点。居中对齐，文本将相对于其宽度居中。如果您的文本居中并且不断变化，它将发生变化。我的建议是在它自己的元素中使用 display: 块的第二行，给它一个最大宽度，将文本向左对齐并使用 magin: 0 auto 使该元素居中。您还必须摆弄底部的第一行边距，以使其看起来相同。或者您可以将第二行嵌套到第一行中。它可能有点老套，但它可能会完成这项工作。它应该看起来像这样。

HTML

<p>Today is Tuesday</p>
<span class="time">Current time is: OO AM: 11: 17</span>

CSS

.time{
   display: block;
   max-width: X;
   margin: 0 auto;
   text-align: left;
 }

p{
    margin-bottom: 0px;
}

请注意，我是盲目的，我不知道您是如何构建代码的。我只是基于您发送的图像。

推荐阅读