如何创建淡入倒数计时器？

Question

功能：

创建了简单的浏览页面导航功能。函数应该是这样工作的：

1.) 当用户单击第 1 页中的 "Start" 按钮时，它将把用户导航到第 2 页

2.) 第二页是游戏页面，从第一页开始导航时，会自动显示开始倒数计时器，通知用户游戏将在 3 秒后开始。因此，导航到第 2 页时的显示应该有 4 个单独的幻灯片，每个幻灯片将显示 '3'、'2'、'1' 和 'start'.

因此我想寻求帮助如何将淡入计数器代码合并到我现有的 <script>??

谢谢

代码:

function fadeInCounter() {
  // Define "slides" and the "state" of the animation.
  var State = "Start1";
  // Global parameters for text.
  textSize(20);
  fill(139, 69, 19);

  var draw = function() {
    // Slide 1.
    if (State === "Start1") {
      background(205, 201, 201);
      text("3", 200, 200);
      Slide1 -= 5;
      if (Slide1 <= 0) {
        background(205, 201, 201);
        State = "Start2";
      }
    }
    // Slide 2.
    if (State === "Start2") {
      background(205, 201, 201);
      text("2", 200, 200);
      Slide2 -= 5;
      if (Slide2 <= 0) {
        background(205, 201, 201);
        State = "Start3";
      }
    }
    // Slide 3.
    if (State === "Start3") {
      background(205, 201, 201);
      text("1", 200, 200);
      Slide3 -= 5;
      if (Slide3 <= 0) {
        background(205, 201, 201);
        State = "End";
      }
    }

    // Ending frame.
    if (State === "End") {
      background(205, 201, 201);
      text("Start.", 180, 200);
    }
  };

}

<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;">

  <div id="fadeinCountDown"></div>


  <canvas id="canvas" width="300" height="300">
  </canvas>
  <canvas id="Counter" width="300" height="300">
  </canvas>
  <img id="roller" style="position:relative; top:1250px;" src="Image/Roller.png">
  <img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="Image/Scroll.png">
</div>

Answer 1

以下是淡入淡出 in/out 计时器。 JSFiddle。

我也随意使用单个 div 而不是多个 div。

var count = 3;

function updateTimer(){
    if(count > 0){
        $("#content").fadeOut('slow', function(){
         $("#content").text(count);
            $("#content").fadeIn();
            count--;
        });
        
    }
    else if(count == 0){
        $("#content").fadeOut('slow', function(){
         $("#content").text("Start");
            $("#content").fadeIn();
            count--;
        });
        
    }
    else {
     $("#content").fadeOut();
        clearInterval(interval);
    }
    
}

var interval = setInterval(function(){updateTimer()},2000)

#content{
    font-size:26px;
    color:red;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>

如何创建淡入倒数计时器？

How to create a fade-in countdown timer?

html

javascript

jquery

countdown