时间戳

首页 > 解决方案 > 倒退消失后如何让时钟出现在屏幕上

javascript - 倒退消失后如何让时钟出现在屏幕上

问题描述

我试图让这个与倒计时开始一起出现的时钟只在元素“GO！”之后开始。消失。我已经尝试在 setInterval 6 秒后开始执行此操作，但没有获得结果。请，如果有任何方法可以调试这个错误，即使使用 css 我也谢谢你。

  var tempo = new Number();
  tempo = 180;
      function start(){
          var number = document.getElementById("number");        
          number.innerHTML = `<div id="cinco">5</div>
                              <div id="quatro">4</div>
                              <div id="tres">3</div>
                              <div id="dois">2</div>
                              <div id="um">1</div>
                              <div id="go">GO!</div>
                             `
          ContagemRegressiva();    
      }  

      function ContagemRegressiva(){
          if(tempo >= 0){
              var minutos = parseInt(tempo / 60);
              minutos = (minutos % 60);
              var segundos = (tempo % 60);
              if(minutos < 10){
                  minutos = '0' + minutos;
                  minutos = minutos.substr(0,2); //-->
              }

              if(segundos < 10){
                  segundos = '0' + segundos;
              }

              setTimeout('ContagemRegressiva()',1000);
              tempo--;
              regressivo.innerHTML = minutos + '<font color=black>:</font>' + segundos;
              if((minutos == 00) && (segundos == 00)){
                  regressivo.innerHTML = minutos + '<font color=black>:</font>' + segundos + '<black></font>';
              }
          }
      }    
.container {
    text-align: center;
    margin: 0 auto;
}

#cinco,
#quatro,
#tres,
#dois,
#um,
#go {
    font-size: 0;
    animation: .5s ease-in-out 2 forwards alternate zoom;
}

#quatro {
    animation-delay: 1s;
}

#tres {
    animation-delay: 2s;
}

#dois {
    animation-delay: 3s;
}

#um {
    animation-delay: 4s;
}

#go {
    animation-delay: 5s;
    animation-iteration-count: 1;
}

@keyframes zoom {
    0% {
        font-size: 0;
    }

    100% {
        font-size: 150px;
    }
}

@keyframes some {
    to {
        transform: scale(0);
        transform-origin: center top;
    }
}

#number {
    animation: 0.5s some linear forwards;
    animation-delay: 6s;
}

.clock{
    position: absolute;
    top: 12%;
    left: 92%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color:black;
}
<body onload="start()">
    <div id="number" class="container" />
    <div class="clock">
        <b style="font-size: 10"></b><span id="regressivo"></span></b><br>
    </div>
</body>

标签： javascriptcss

解决方案

您可以使用 setTimeout 函数来调用您的 ContagemRegressiva 函数。

function start() {
    var number = document.getElementById("number");        
    number.innerHTML = `
    <div id="cinco">5</div>
    <div id="quatro">4</div>
    <div id="tres">3</div>
    <div id="dois">2</div>
    <div id="um">1</div>
    <div id="go">GO!</div>
    `;

    setTimeout(ContagemRegressiva, 6000);
}

您只需要在运行该函数之前找到等待的秒数。我在这里使用了 6000 毫秒。

第二种方式：您可以将“animationend”事件添加到您的#go 元素。当其上的动画结束时，将触发“animationend”事件。因此，您可以使用以下代码执行此操作：

function start() {
    var number = document.getElementById("number");        
    number.innerHTML = `
    <div id="cinco">5</div>
    <div id="quatro">4</div>
    <div id="tres">3</div>
    <div id="dois">2</div>
    <div id="um">1</div>
    <div id="go">GO!</div>
    `;

    var goElem = document.getElementById('go');
    goElem.addEventListener('animationend', ContagemRegressiva);
}

推荐阅读