2016-09-17 3 views
-1

20秒後に各質問(合計5つの質問)を自動的に変更するクイズゲームを開発中です。私にHTMLコードを提供し、各質問に20秒カウントダウンのコードを提供してください。カウントダウンを切り替えることができますかカウントダウンで特定の時間後に質問を変更する場合とカウントダウンを切り替える場合

**

(一時停止/クリックで再開)?

**

+0

の可能性のある重複(http://stackoverflow.com/questions/8630722/how-can-i-change-text-after-time-using-jquery) – Morishiri

+0

これは、少なくともhtmlで関連コードを提供できますか?あなただけの質問を表示 –

+0

StackOverflowのためのものをお読みください。誰もがプログラムを作成するのではなく、特定の問題を解決するのに役立ちます(!)。 – BlueBockser

答えて

1

これを試してみてください:[?私はjQueryのを使用して、時間後にテキストを変更するにはどうすればよい]

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <style> 
 
     .question { 
 
      display: none; 
 
     } 
 
     .count { 
 
      position: absolute; 
 
      top: 100px; 
 
     } 
 
    </style> 
 
</head> 
 
    <body> 
 
     <h1 class="question">I am Question 1</h1> 
 
     <h1 class="question">I am Question 2</h1> 
 
     <h1 class="question">I am Question 3</h1> 
 
     <h1 class="question">I am Question 4</h1> 
 
     <h1 class="question">I am Question 5</h1> 
 
     <h3 class="count">CountDown : 19 </h3> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     
 
     <script> 
 
      
 
$(document).ready(function(){ 
 
    
 
    var total = $(".question").length; 
 
    var cur = 1; 
 
    var cou = 19; 
 
    
 
    $(".question").eq(0).show().delay(18000).hide(2000); 
 
    
 
    var timer = setInterval(function(){ 
 
     
 
     fun(); 
 
     
 
    },20000) 
 
    
 
    function fun(){ 
 
     
 
     $(".question").eq(cur).show().delay(18000).hide(2000); 
 
     
 
     cur += 1; 
 
     
 
     if(cur > total) { 
 
      
 
      alert("done"); 
 
      clearInterval(timer); 
 
      clearInterval(countTimer); 
 
     } 
 
    } 
 
    
 
    var countTimer = setInterval(function(){ 
 
     
 
     cou -= 1; 
 
    
 
    $(".count").text("CountDown : " + cou); 
 
    
 
    
 
    if(cou === 0) 
 
     cou = 20; 
 
    
 
    
 
    
 
},1000); 
 

 
    
 
}) 
 
      
 
     </script> 
 
    </body> 
 
</html>

関連する問題