Question

以下代码生成一个计时器，该计时器不会在fadein之后显示当前时间。所以它看起来很糟糕。如何在淡化后重复显示当前时间？

<!doctype html>
<html>
<head>
    <title>Exercise</title>
    <style>
        #box {
            margin-left: auto;
            margin-right: auto;
            width: auto;
            background: red;
            text-align: center;
            font-size: 170px;
        }
    </style>
</head>
<body>

    <div id="box"></div>

    <script src="jquery.js"></script>
    <script>
        $(function () {
            fadeout();
        });

        function fadein() {
            $("#box").fadeIn("500", fadeout);
            //UpdateTime();
        }
        function fadeout() {
            UpdateTime();
            $("#box").fadeOut("500", fadein);
        }

        function GetTime() {
            var now = new Date();
            var obj = {
                Hour: now.getHours(),
                Minute: now.getMinutes(),
                Second: now.getSeconds()
            };

            return obj;
        }

        function UpdateTime() {
            var box = $("#box");

            var obj = GetTime();
            if (obj.Hour < 10)
                obj.Hour = "0" + obj.Hour;
            if (obj.Minute < 10)
                obj.Minute = "0" + obj.Minute;
            if (obj.Second < 10)
                obj.Second = "0" + obj.Second;

            box.text(obj.Hour + ":" + obj.Minute + ":" + obj.Second);
        }

    </script>
</body>
</html>

Answer 1

您正在更新淡入完成后的时间，但在淡出完成之前：http://jsfiddle.net/h8kmqsv6/

尝试将对UpdateTime的调用移至淡入的开头（请参阅http://jsfiddle.net/h8kmqsv6/1/）：

function fadein() {
   UpdateTime();
   $("#box").fadeIn("500", fadeout);
}
function fadeout() {
   $("#box").fadeOut("500", fadein);
}

更新：为了改善同步，您可以使用setInterval：

var $box = $("#box");
$box.fadeOut(0);
setInterval(tick, 1000);

function tick() {
    UpdateTime();

    $box.fadeIn(500, function() {
        $box.fadeOut(500);
    });
}

链接：http://jsfiddle.net/h8kmqsv6/6/

UPDATE2 ：停止tick内的动画也是一个好主意：

function tick() {
    $box.stop(true, true);

    UpdateTime();

    $box.fadeIn(500, function() {
        $box.fadeOut(500);
    });
}

链接：http://jsfiddle.net/h8kmqsv6/15/

如何在淡化后重复显示当前时间？

1 个答案: