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>

Javascript-5秒后禁用计时器

1 个答案: