Question

我是编码的新手，并且设置了一个基本时钟，该时钟不占用系统时间。我已经完成了所有这些工作，但是我试图在数字上添加动画，以便每当它们更改时，它都不会立即发生。我可以先淡入淡出，然后淡入新数字以使其过渡，但这并不是我想要的。我希望该文本始终可见，然后淡入另一个文本。不是从文本到白色，而是从白色到新文本。

这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div id="clock"></div>
    </body>
    <script src="jquery/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
</html>

这是Javascript：

var hours, minutes, seconds, date;

function updateClock() {
    if (hours < 10) {
        hours = parseInt(hours);
        hours = "0" + hours;
    };

    if (minutes < 10) {
        minutes = parseInt(minutes);
        minutes = "0" + minutes;
    };

    if (seconds < 10) {
        seconds = parseInt(seconds);
        seconds = "0" + seconds;
    };

    $("#clock").text(hours + ":" + minutes + ":" + seconds);
};

function getTime() {
    date = new Date;
    hours = date.getHours();
    minutes = date.getMinutes();
    seconds = date.getSeconds();
    updateClock();
};

getTime();
setInterval(getTime, 1000);

这是CSS：

#clock {
    position: absolute;
    width: 500px;
    height: 175px;
    left: calc(50% - 250px);
    top: calc(50% - 87.5px);
    background-color: lightgray;
    color: black;
    font-size: 125px;
    text-align: center;
}

有没有一种方法可以将Javacript中的一个单词“变形”为另一个单词？

0 个答案: