Javascript - 5秒后定時器禁用

Question

我有定時器的代碼，它的工作正常。 但我需要通過在5秒后使用淡出效果禁用它來自定義它。

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

Answer 1

在這里我們設置為counter 5和計時器每1000ms或1s打勾，在每個刻度我們檢查我們是否已達到0以下，如果我們那時我們將設置計時器，刪除計時器diplay並通過調用顯示功能顯示內容

更新：你要求像動畫一樣加載。 我把它添加到答案中，但代碼不是我的。 我從這篇文章中把它拿走了。 你可以問他有關動畫代碼的任何問題。

 var display = function(){ document.getElementById("content").style.display = "inline"; } var myTimer = function(){ var counter = 5; var timer = setInterval(function(){ if(counter <= 0){ clearInterval(timer); document.getElementById("loading").style.display = "none"; display(); }else{ if(counter == 5){ document.getElementById("loading").className = "loading"; document.getElementById("loading").style.display = "block"; } document.getElementById("timer").innerHTML = counter--; } }, 1000); } myTimer(); 

 .loading { width: 50px; height: 50px; margin: 30px auto; position: relative; } .inner-shadow { z-index: 4; position: absolute; width: 100%; height: 100%; border-radius: 100%; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5); } .inner-shadow { line-height: 40px; text-align: center; top: 50%; left: 50%; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 100%; background-color: #ffffff; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5); } .hold { position: absolute; width: 100%; height: 100%; clip: rect(0px, 50px, 50px, 25px); border-radius: 100%; background-color: #fff; } .fill, .dot span { background-color: #f50; } .fill { position: absolute; width: 100%; height: 100%; border-radius: 100%; clip: rect(0px, 25px, 50px, 0px); } .left .fill { z-index: 1; -webkit-animation: left 2.5s linear; -moz-animation: left 2.5s linear; animation: left 2.5s linear both; } @keyframes left { 0% { -webkit-transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes left { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); } } .right { z-index: 3; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .right .fill { z-index: 3; -webkit-animation: right 2.5s linear; -moz-animation: right 2.5s linear; animation: right 2.5s linear both; -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; animation-delay: 2.5s; } @keyframes right { 0% { -webkit-transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes right { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } 

 <div id='loading' class="loading" style="display:none;"> <div class='inner-shadow' id="timer"> </div> <div class='hold left'> <div class='fill'></div> </div> <div class='hold right'> <div class='fill'></div> </div> </div> <p id="content" style="display:none;" >Hello</p>