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以下，如果达到，我们将设置计时器，删除计时器显示并通过调用显示函数显示内容

更新：您要求加载类似动画。我将其添加到答案中，但代码不是我的。我从这个post 中得到它。你可以问他关于动画代码的任何问题。

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>