Auf der Suche nach einem Rat. Fehler irgendwo. HTML und JS

Ich schrieb ein Skript, das einige Zeit zählt und dann ein Bild zeigt.Auf der Suche nach einem Rat. Fehler irgendwo. HTML und JS

Ich habe eine Schaltfläche hinzugefügt, um die Option zu geben, mit dem Zählen aufzuhören, wann immer ich will. Ich habe versucht, eine Funktion zu machen, die die Variable seconds gleich 0 macht, was in diesem Fall die "else" -Schleife in der timer()-Funktion beginnen sollte, wo sie enden sollte.

Anstatt eine Schaltfläche zuzuweisen, um eine surrender() Funktion zu machen, kann ich es mit einem Hintergrund (Zeile 7) machen.

Wie soll ich den gesamten Vorgang nach ein paar Sekunden warten (Zeile 30)?

Ich bin neu in der Programmierung, so würde ich für möglicherweise am einfachsten Code zu verstehen.

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

Quelle

2016-11-23 I_love_pugs

Es gab mehrere Dinge falsch mit Ihrem Code (siehe Kommentare im Snippet unten), aber das größte Hindernis für Ihre Übergabe-Funktion ist, dass obwohl Sie seconds auf Null gesetzt, wenn die Funktion Timing Läuft erneut, dieser Wert wird gelöscht, wenn seconds zurück auf Ihr Datum minus Ihren Start zurückgesetzt wird. Statt über Sekunden Sorgen, nur Hingabe tun, was es braucht, um: die anzuhalten, um das Bild anzuzeigen und stellen Sie den Zähler auf Null:

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

Quelle

2016-11-23 14:34:27

Danke, Sie hat mir wirklich geholfen; * –

Auf der Suche nach einem Rat. Fehler irgendwo. HTML und JS

Antwort

Verwandte Themen