Detaillierte Erklärung der JavaScript-Timer- und Button-Effekt-Einstellungen

Detaillierte Erklärung der JavaScript-Timer- und Button-Effekt-Einstellungen

Timer-Effekte:

 <div>
    <font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> &nbsp;&nbsp;&nbsp;
    //Die Breite des Zeitwerts muss festgelegt werden, um zu vermeiden, dass sich die Position der nächsten drei Bilder ändert, wenn sich der Zeitwert von 9 auf 10 (und von 99 auf 100) ändert. //Die Schriftart ist jedoch ein Inline-Element und ihre Breite kann nicht festgelegt werden. Daher wird die Schriftart in ein Inline-Blockelement geändert: display:inline-block
    <img src='start.png' class='imgBtn' onclick="start(dieses)" >
    <img src='suspend.png' class='imgBtn' onclick="suspend(this)">
    <img src='stop.png' class='imgBtn' onclick="stop(this)">
</div>
 .imgBtn{ 
    Cursor:Zeiger; 
    Breite: 25px;
    Höhe: 25px;
}
 var timerState=2; //0-Start (Zeitmessung läuft) 1-Suspend (Zeitmessung anhalten) 2-Stop (Zeitmessung stoppen)
var timerID; //Timer //Klicken Sie auf die Start-Schaltfläche, um die Funktion aufzurufen function start(obj){
	if(timerState==0) //Wenn der aktuelle Status „Timing“ ist, funktioniert dieser Klick nicht. return;
	anders
	{
		timerState=0;//Der Indikator misst die Zeit changeImgBtnState(); //Ändere den Anzeigeeffekt der Schaltfläche timerID=setInterval("f7()",500); //Starte den Timer }
}
Funktion suspend(obj){
	wenn(timerState==1 || timerState==2)
		return; //Wenn der aktuelle Status das Anhalten oder Stoppen der Zeitmessung ist, funktioniert dieser Klick sonst nicht
	{
		timerState=1; //Pausenzeit markieren changeImgBtnState(); //Anzeigeeffekt der Schaltfläche ändern clearInterval(timerID); //Timer löschen }
}
Funktion stop(obj){
	if(timerState==2) //Wenn der aktuelle Status darin besteht, die Zeitmessung zu stoppen, funktioniert dieser Klick nicht. return;
	if(timerState==0) //Wenn der aktuelle Status „Timing“ ist, lösche den Timer clearInterval(timerID); 
	document.getElementById('timeCount').innerHTML=0; //Setze den Timerwert zurück timerState=2; //Stoppe den Timer changeImgBtnState(); //Ändere den Anzeigeeffekt der Schaltfläche}
Funktion f7()
{
	var i=document.getElementById('timeCount').innerHTML;
	document.getElementById('timeCount').innerHTML=parseInt(i)+1;
}
Funktion changeImgBtnState(){
	var imgBtn = document.getElementsByClassName('imgBtn');
	für(var i=0;i<3;i++){
		imgBtnState(imgBtn[i],timerState!=i);
	}
}
Funktion imgBtnState(Objekt,Flag){
	if(flag==false) //Die Schaltfläche ist nicht verfügbar obj.style.cssText="border:1px solid black;width:15px;height:15px;padding:5px;";
	anders
		obj.style.cssText="Rand:0px durchgehend schwarz;Breite:25px;Höhe:25px;Padding:0px;";
}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Vue.js implementiert eine einfache Timerfunktion
  • Implementierung eines einfachen Timers in JavaScript
  • JS implementiert einen Stoppuhr-Timer
  • JS verwendet den setInterval-Timer, um die 10-Sekunden-Challenge zu implementieren
  • JavaScript implementiert einen gut aussehenden Stoppuhr-Timer
  • JavaScript setInterval() vs setTimeout() Timer
  • js implementiert integrierten Timer

<<:  So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu

>>:  MySQL-Datenbank-Master-Slave-Replikation und Lese-/Schreibtrennung

Artikel empfehlen

Mybatis-Statistiken zur Ausführungszeit jeder SQL-Anweisung

Hintergrund In letzter Zeit werde ich in Intervie...

So installieren Sie eine PHP7 + Nginx-Umgebung unter CentOS6.6

Dieser Artikel beschreibt, wie man eine PHP7 + Ng...

JS berechnet die Gewinnwahrscheinlichkeit basierend auf dem Preisgewicht

Inhaltsverzeichnis 1. Beispielszenario 1.1. Legen...

Vue.js-Textfeld mit Dropdown-Komponente

Ein Textfeld mit Dropdown-Liste ermöglicht es Ben...

So legen Sie eine Verzeichnis-Whitelist und eine IP-Whitelist in Nginx fest

1. Legen Sie eine Verzeichnis-Whitelist fest: Leg...

Lösung für das Problem „VMware-virtuelle Maschine ohne Netzwerk“

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Methode 1: Bitte fügen Sie den folgenden Code nach...

Docker-Installation von Nginx Probleme und Fehleranalyse

Frage: Beim Installieren Nginx in Docker ist der ...

Beispiele für MySQL-Batch-Hinzufügungs- und Speichermethoden

Beim Anmelden am Stresstest sind viele verschiede...

mysql8.0.23 msi Installation super ausführliches Tutorial

1. Laden Sie MySql herunter und installieren Sie ...

MySQL 5.7-Clusterkonfigurationsschritte

Inhaltsverzeichnis 1. Ändern Sie die Datei my.cnf...