在同一个 HTML 中使用 CountDown 从 Inline1 跳转到 Inline2

Question

我有一个倒计时 3 秒的第一个内联 table，当它达到 0（零）时，我想自己加载第二个内联块。当计数器 === 0.

这是一个游戏，您有 3 秒的时间来选择每个方块的答案，您可以单击或让游戏在计时器归零后带您进入下一个方块。

如果单击 link，它会带我到第二个街区。问题是结合倒计时并自行过渡到第 2 或第 3 个块。

我尝试了很多方法但都没有成功。关于如何修复我的代码的任何想法？我真的很感激。希望这是有道理的。

HTML:

<button class='inline' href="#Set1" onclick="CountDown()">Start here...</button>

<div style='display:none'>
   <div id='GameSet1'>
       <table width="100%"> 
            <tr>
                <td>
                     <a class="Set2" href="#">Click here to open 2nd Set</a>
                </td>
                <td>
                    <b>Time left: <div id="count1">3</div></b>
                 </td>             
            </tr>
        </table>
  </div>
</div>
<div style='display:none'>
    <div id='GameSet2'>
        <table width="100%"> 
            <tr>
                <td>
                     <a class="SetN" href="#">Something else here</a>
                </td>
                <td>
                    <b>Time left: <div id="countN">3</div></b>
                 </td>              
            </tr>
        </table>
    </div>
</div>

当 (counter === 0) 不起作用时，此处的代码。

代码：（使用 jQuery）

<script>
$(document).ready(function () {
    $(".inline").colorbox({
    inline: true,
    width: "1000",
    height: "850"
    });    
});
function CountDown() { 
    var counter = 3;                                
    setInterval(function () {
    counter--;
    if (counter >= 0) {
        span = document.getElementById("count1");
        span.innerHTML = counter;
    }
    if (counter === 0) {
        $(".Set2").colorbox({
            inline:true, 
            href:"#GameSet2"
        });
    clearInterval(counter);
    }, 1000);
}
</script>

Answer 1

据我所知，您有一组面板，您希望每个面板显示 3 秒，除非单击 link。如果是这种情况，我有一个解决方案。不幸的是，我的示例在 jsFiddle 中不起作用，因为所有内容都包含在一个函数中。另外，我决定不使用jQuery，因为我以前从未使用过它，当我尝试使用颜色框时，它说它没有定义。

代码是：

</head>
<body>
<button onclick="start(this)" class="inline">Start Here</button>

<div style="display:none" id="Set1">
    <table border="1">
        <tr>
            <td>
                <a href="#" onclick="start(this)">Click here to open 2nd Set</a>
            </td>
            <td>
                Time Left: <span id="Time1"></span>
            </td>
        </tr>
    </table>
</div>

<div style="display:none" id="Set2">
    <table border="1">
        <tr>
            <td>
                <a href="#" onclick="done()">Something else here</a>
            </td>
            <td>
                Time Left: <span id="Time2"></span>
            </td>
        </tr>
    </table>
</div>

<script>
    window.onload = function(){
        //You could use colorbox here
        /*
        $(".inline").colorbox({
            inline: true,
            width: "1000",
            height: "850"
        }); 
        */
    }
    //This is the Question Number. It should start at zero.
    num = 0
    //This is a object where all the counters are going to be stored
    count = {}

    function Count(count,func,func2){
        /*
            This is an Object Constructor. This will hold all the timers and make
            it easier to create and kill a timer. The instanses will also hold the 
            data of the timer.
        */
        this.count = count
        thisParent = this

        this.kill = function(){
            //This is a function for stopping the timer
            clearInterval(thisParent.counter)
            if(func2 != undefined){
                //Calls the function when the timer ends.
                //The function was passed in as a argument
                func2()
            }
        }

        function oneCount(){
            //This function is executed every second

            //This function is passed in as an argument and is called every second.
            //The Parent Object is passed into it as the argument
            func(thisParent)

            //Decrements count
            thisParent.count -= 1

            //Stops timer at zero
            if(thisParent.count < 0){
                thisParent.kill()
            }
        }

        //This executes it once to prevent delay
        oneCount()

        //The counter is stored in ObjectInstance.counter
        this.counter = setInterval(oneCount,1000)
    }
    function start(el){
        num += 1
        max = 2
        element = document.getElementById("Set"+String(num))
        element.style.display = "block"


        if(num == 1){
            el.style.display = "none"
        }else{
            document.getElementById("Set"+String(num-1)).style.display = "none"
            count[num-1].kill()
        }

        element2 = document.getElementById("Time"+num.toString())
        function CountFunction(o,el){
            el.innerHTML = o.count
        }
        function End(){
            if(num<max){
                start(num+1)
            }
        }
        count[num] = new Count(3,function(n){CountFunction(n,element2)},End)
    }
    function done(){
        alert("That Was The Last Question")
    }
</script>
<body>
<html>

URL 在这里：

https://dl.dropboxusercontent.com/u/122705406/q.html

在同一个 HTML 中使用 CountDown 从 Inline1 跳转到 Inline2

Jumping from Inline1 to Inline2 using a CountDown in the same HTML

jquery

colorbox