首页 > 解决方案 > 有没有办法在 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);
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clock"></div>

标签: javascript

解决方案


推荐阅读