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

Einfaches Setup von VMware ESXi6.7 (mit Bildern und Text)

1. Einführung in VMware vSphere VMware vSphere is...

So verwenden Sie den Vue-Filter

Inhaltsverzeichnis Überblick Filter definieren Ve...

Benutzerdefinierte Docker-Netzwerkimplementierung

Inhaltsverzeichnis 1. Passen Sie das Netzwerk an,...

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...

Perfekte Lösung für das Zeitzonenproblem des Docker Alpine-Image

Als ich kürzlich Docker zum Bereitstellen einer J...

HTML-Tabellen-Markup-Tutorial (38): Rahmenfarben-Attribut der Kopfzeile BORDERCOLOR

Um die Tabelle zu verschönern, können Sie für die...

Analyse des Ereignisschleifenmechanismus von js

Vorwort Wie wir alle wissen, ist JavaScript im Ke...

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

Vor kurzem hatte ich zufällig Kontakt mit dem Pro...

Der Unterschied und die Wahl zwischen Datum und Uhrzeit und Zeitstempel in MySQL

Inhaltsverzeichnis 1 Unterschied 1.1 Raumbelegung...

Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt

Bei der Replikation werden die DDL- und DML-Opera...

MySQL-Lösung zur Datenpaging-Abfrageoptimierung auf Millionenebene

Wenn die Tabelle Zehntausende Datensätze enthält,...