Eine einfache Möglichkeit, einen Timer in javascript_javascript skills zu implementieren

Timer sind auch häufig verwendete Funktionen im Leben, wie zum Beispiel beim Training, beim Laufen von Wettkämpfen und anderen damit verbundenen Aktivitäten. Wir verwenden Javascript, um einen Timer zu vervollständigen.

Timer ist hauptsächlich eine logische Verarbeitung der Zeit. Beispielsweise entsprechen 60 Sekunden einer Minute und 60 Minuten einer Stunde. Es handelt sich hier nur um eine so einfache Logik, die dann dynamisch angezeigt wird in einer Insider-Eingabe.

Jetzt vervollständigen wir diese Schnittstelle

<label>计时:</label> 
<input type="text" name="" id="timer"/> 
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>

Der Zweck, dem Label-Element eine ID zu geben, besteht darin, das Label zu erhalten und dann zwei Klickereignisse, ein Pause-Ereignis für den Zähler und ein Neustart-Ereignis hinzuzufügen.

Um das Timing zu starten, verwenden wir hauptsächlich die Methode setInterval, die die Methode alle 1 Sekunde ausführt, damit wir die eingangs erwähnte Zeit verarbeiten können ist gleich 1 Minute..., also müssen Sie hier Ihre Urteilskraft nutzen, um die erhaltenen Sekunden, Minuten und Stunden im Eingabefeld
anzuzeigen

var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时

//60秒 === 1分
//60分 === 1小时
function timer() {
 return setInterval(function () {

  var str_sec = n_sec;
  var str_min = n_min;
  var str_hour = n_hour;
  if ( n_sec < 10) {
   str_sec = "0" + n_sec;
  }
  if ( n_min < 10 ) {
   str_min = "0" + n_min;
  }

  if ( n_hour < 10 ) {
   str_hour = "0" + n_hour;
  }

  var time = str_hour + ":" + str_min + ":" + str_sec;
  ele_timer.value = time;
  n_sec++;
  if (n_sec > 59){
   n_sec = 0;
   n_min++;
  }
  if (n_min > 59) {
   n_sec = 0;
   n_hour++;
  }


 }, 1000);
}

var n_timer = timer();

Wir verwenden die Timer-Methode, um die setInterval-Methode zu umschließen, um die Verarbeitung später anzuhalten und neu zu starten Wenn der Benutzer auf „Pause“ klickt, stoppt der Timer die Zeitmessung. Wenn der Benutzer weiterhin auf die Schaltfläche klickt, gibt es einen Zustand, der gesteuert werden muss. Für diesen Zustand geben wir der Schaltfläche ein Attribut 🎜>

//暂停和继续
function pause(self) {
  var state = self.getAttribute("state");
  if (state === "on") {
   clearInterval(n_timer);
   self.textContent = "继续";
   self.setAttribute("state", "off");
  } else {
   n_timer = timer();
   self.textContent = "暂停";
   self.setAttribute("state", "on");
  }
}

Schließlich werfen wir einen Blick auf den Neustart des Ereignisses. Setzen Sie den Zähler auf 0 und ändern Sie dann den Anfangszustand der Pause-Schaltfläche.

function restart() {
 clearInterval(n_timer);
 n_sec = 0;
 n_min = 0;
 n_hour = 0;
 n_timer = timer();

 var ele_pause = document.getElementById("pause");
 ele_pause.textContent = "暂停";
 ele_pause.setAttribute("state", "on");
}

Damit ist die Timing-Funktion abgeschlossen. Der Effekt ist wie folgt

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.