Question

我正在尝试制作一个30秒的计时器，并在它完成之后再来一个10秒的计时器。除了10秒计时器外，一切正常。谁能告诉我我做错了什么？

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Time test</title>
        <style type="text/css">

            #btn2 {
                display: none;
            }

        </style>
        <script type="text/javascript">

            COUNTER_START = 30

            function tick () {
                if (document.getElementById ('counter').firstChild.data > 0) {
                    document.getElementById ('counter').firstChild.data = document.getElementById ('counter').firstChild.data - 1
                    setTimeout ('tick()', 1000)
                } 
                else if (document.getElementById ('counter').firstChild.data = 0) {
                    document.getElementById ('counter').firstChild.data = document.getElementById ('counter').firstChild.data - 1
                    setTimeout ('tick()', 1000)
                }
                else {
                    document.getElementById ('counter').firstChild.data = '10 seconds break',
                    document.getElementById('btn2').innerHTML = "Next",
                    document.getElementById('btn2').style.display = "block",
                    document.getElementById('btn').style.display = "none",
                    document.getElementById('audio').innerHTML = "<embed loop='true' src='break.wav' hidden='true' type='audio/mp3'></embed>"
                }
            }

            if (document.getElementById) onload = function () {
                var t = document.createTextNode (COUNTER_START)
                var p = document.createElement ('P')
                p.appendChild (t)
                p.setAttribute ('id', 'counter')

                var body = document.getElementsByTagName ('BODY')[0]
                var firstChild = body.getElementsByTagName ('*')[0]

                body.insertBefore (p, firstChild)
                tick()
            } 
        </script>

    </head>
    <body>
        <h3>Example</h3>
        <button id="btn" href="#">idk</button><button id="btn2" onclick="window.location.href='https://www.google.com'"></button>
        <div id="audio">

        </div>
    </body>
</html>

Answer 1

这段代码也有效，只是没有时间来解释，因为我花了很长时间才将这段代码对齐。但只是阅读它。

COUNTER_START = 30
var counter_checker = 0 //Check if in 30 seconds counter or 10 seconds counter 
function tick () {
   if (document.getElementById ('counter').firstChild.data > 0) {
       document.getElementById ('counter').firstChild.data = document.getElementById ('counter').firstChild.data - 1
    setTimeout ('tick()', 1000)
} 
else if (document.getElementById ('counter').firstChild.data == 0) {
counter_checker += 1
if(counter_checker == 2) {setTimeout(MoveOn(), 0); }
else {
    document.getElementById ('counter').firstChild.data = '10 seconds break';
        setTimeout (function () {
        document.getElementById ('counter').firstChild.data = 10
        tick();
    }, 2000)
  }
}
}
function MoveOn(){
    document.getElementById ('counter').firstChild.data = 'Done!',
    document.getElementById('btn2').innerHTML = "Next",
    document.getElementById('btn2').style.display = "block",
    document.getElementById('btn').style.display = "none",
    document.getElementById('audio').innerHTML = "<embed loop='true' src='break.wav' hidden='true' type='audio/mp3'></embed>"
};

if (document.getElementById) onload = function () {
var t = document.createTextNode (COUNTER_START)
var p = document.createElement ('P')
p.appendChild (t)
p.setAttribute ('id', 'counter')

var body = document.getElementsByTagName ('BODY')[0]
var firstChild = body.getElementsByTagName ('*')[0]

body.insertBefore (p, firstChild)
tick() 
};

JavaScript计时器无法正常工作

1 个答案: