Question

我写了一个脚本，花了一些时间，然后显示一个图像。

我添加了一个按钮，可以随时根据需要停止计数。我试图创建一个函数，它将使变量seconds等于0，在这种情况下应该启动＆＃34; else＆＃34;在timer()函数中循环，它应该结束计数。

我可以使用背景（第7行）代替属性按钮来创建surrender()功能。

等待几秒钟后如何循环整个操作（第30行）？

我是编程新手，所以我会要求最简单的理解代码。

<!DOCTYPE html>
<html>
<body id="bckgrd" bgcolor="white"; onload="timer();">
    <script type="text/javascript">
        var clock;

        // ?? document.getElementById("tlo").onclick=  surrender(); ??

        function timer () {
            clearInterval(clock);
            var start = new Date().getTime();
            clock = setInterval(function() {
                var seconds = Math.round(15 - (new Date().getTime() - start) / 1000);
                if (seconds >= 0)
                    document.getElementById('seconds').innerHTML = seconds;
                else 
                    clearInterval(clock);

                    if (seconds==0) document.getElementById("photo").innerHTML='<img src="sweetpug.jpg"/>';

                    // ?? setTimeout(timer(), 2000) ??

            }, 1000);
        }

        function surrender(){
        seconds==0
        }

    </script>
    <button id= "button" onclick="surrender();">give up</button>
    <p id="seconds">15</p>
    <div id="photo">

    </div>
</body>

Answer 1

您的代码有几个问题（请参阅下面的代码段中的注释），但退出函数的最大障碍是即使您将seconds设置为零，当计时功能再次运行时，当seconds重置为您的日期减去您的开始时，值会被清除。不要担心秒，只需让投降做它所需要的：停止时钟，显示图像并将计数器设置为零：

// Get DOM element references and store them in variables instead
// of scanning for them in your code later.
var btn = document.getElementById("btnSurrender");
var pic = document.getElementById("photo");
var secondsP = document.getElementById('seconds');

// If you don't know what the value of a variable is going to be
// it's best to initialize it to null as a starting value so that
// you can understand what is happening during debugging.

// Variable to store reference to running timer
var clock = null;

// Wire button up to click event handler. Do this using the 
// W3C DOM Event Model standard technique and not as an inline
// HTML event handling attribute.
btn.addEventListener("click", surrender);

function timer () {
  // Stop any previously running timers
  clearInterval(clock);
  
  var start = new Date().getTime();
  
  clock = setInterval(function() {
             // Variable to store the seconds that tick away
             // Because this is declared within the timing function
             // you can't access it from surrender, which is what you 
             // were originally trying to do. If that were the case, you should
             // have declared it outside of both functions so that either could
             // get to it. But, since my answer isn't going to need secons anywhere
             // else but here, we'll leave it here.
             var seconds = Math.round(15 - (new Date().getTime() - start) / 1000);
    
             // Always include the curly braces around your if statement's branches
             // This avoids bugs later on
             if (seconds >= 0) {
               secondsP.textContent = seconds;
             } else {
               clearInterval(clock);
             }

             if (seconds === 0) {
               pic.innerHTML='<img src="sweetpug.jpg" alt="sweetpug.jpg">';
             }
  }, 1000);
}

function surrender(){
 //seconds = 0; // You had seconds == 0, == is for comparison, not assignment
  
 // Stop any previously running timers
 clearInterval(clock);
 pic.innerHTML='<img src="sweetpug.jpg" alt="sweetpug.jpg">';
 secondsP.textContent = 0;
}

timer();

<button id= "btnSurrender">give up</button>
    <p id="seconds">15</p>
    <div id="photo"></div>

寻求建议。在某处错误。 HTML和JS

1 个答案: