Question

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

这是一款游戏，你可以在3秒内选择每个区块的答案，一旦计时器变为零，你可以点击或让游戏带你到下一个区块。

如果单击该链接，它确实需要我到第二个区块。问题在于将倒计时和过渡到第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>

此处的代码（计数器=== 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秒钟，除非单击链接。如果是这种情况，我有一个解决方案。不幸的是，我的示例在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>

网址在这里：

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

使用相同HTML中的CountDown从Inline1跳转到Inline2

1 个答案: