Question

当我的网站加载div在div显示之前隐藏了x秒钟时，我只希望它在x秒后有一个进度条，并且进度条将保持100％，然后div将显示，如何我这样做吗？

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
  $(document).ready(function () {
      // Hide the div
      $("#sidebar-block").hide();
      // Show the div after 5s
      $("#sidebar-block").delay(12000).fadeIn(100);  
  });    
</script>

Answer 1

听是一种无需使用jQuery的代码。

<html>

<head>
    <script>
        let intervalId; // preserve intervalID so we can cancel it later
        let startTime; // preserve progressbar start time
        let continueFor = 5000; // X sec
        let interval = 10; // progressbar updte interval

        let wait =
            ms => new Promise(
                r => setTimeout(r, ms)
            );

        let repeat =
            (ms, func) => new Promise(
                r => (
                    intervalId = setInterval(func, ms),
                    wait(ms).then(r)
                )
            );

        window.onload = function() {
            let div = document.getElementById("div");
            let elem = document.getElementById("progress");
            let startTime = new Date().valueOf();

            div.hidden = true;

            // this function stop the repeats, when X sec is passed.
            let stop =
                () => new Promise(
                    r => r(setTimeout(() => {
                        clearInterval(intervalId);
                        elem.hidden = true;
                        div.hidden = false;
                    }, continueFor))
                );

            // this function repeats to calculate progress bar value, at every interval.
            repeat(intervalId, function() {
                let elapse = new Date().valueOf() - startTime;
                elem.value = elem.max * elapse / continueFor;
                console.log(elem.value);
            }).then(stop());
        };
    </script>
</head>

<body>
    <div id="div"> I am here! </div>
    <progress id="progress" max="100" value="0"></progress>
</body>

</html>

运行进度条，然后在x秒后显示div

1 个答案: