Как создать таймер обратного отсчета времени затухания?

Question

Функциональность:

Создали простой просмотр страниц функции навигации. Это, как функция должна работать:

1.) Когда пользователь нажимает кнопку «Пуск» в page1, он будет перемещаться пользователя на 2-й странице

2.) вторая страница представляет собой страницу игры посредством , при навигации с 1-й страницы будет автоматически отображаться таймер обратного отсчета, чтобы уведомить пользователя о том, что игра начинается через 3 секунды. Поэтому дисплей при навигации по странице 2 должен иметь 4 отдельных слайда, на каждом слайде будут отображаться «3», «2», «1» и «старт».

Следовательно, я хотел бы попросить о помощи, как я могу включить код счетчика в мой существующий <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

Ниже приводится выцветанию в/из таймера. JSFiddle.

Также я взял на себя смелость использовать один div вместо нескольких div.

var count = 3; 
 

 
function updateTimer(){ 
 
    if(count > 0){ 
 
     $("#content").fadeOut('slow', function(){ 
 
     \t $("#content").text(count); 
 
      $("#content").fadeIn(); 
 
      count--; 
 
     }); 
 
     
 
    } 
 
    else if(count == 0){ 
 
     $("#content").fadeOut('slow', function(){ 
 
     \t $("#content").text("Start"); 
 
      $("#content").fadeIn(); 
 
      count--; 
 
     }); 
 
     
 
    } 
 
    else { 
 
    \t $("#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>