Question

我正在开发一个问答游戏，我希望每个问题（共5个问题）在20秒后自动更改。请提供html代码，并提供每个问题倒计时20秒的代码。

**

如何切换倒计时（点击暂停/恢复）？

**

Answer 1

试试这个：

＆＃13;

<!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>

＆＃13;

在倒计时的特定时间之后更改问题以及是否应倒拨倒计时

1 个答案: