Timer-Effekte: <div> <font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> //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;"; } ZusammenfassenDieser 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:
|
<<: So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu
>>: MySQL-Datenbank-Master-Slave-Replikation und Lese-/Schreibtrennung
Hintergrund In letzter Zeit werde ich in Intervie...
Die Datei shutdown.bat enthält einen Satz wenn ni...
Vor dem Verstecken: Nach dem Verstecken: CSS: Code...
Dieser Artikel beschreibt, wie man eine PHP7 + Ng...
Inhaltsverzeichnis 1. Beispielszenario 1.1. Legen...
Ein Textfeld mit Dropdown-Liste ermöglicht es Ben...
1. Legen Sie eine Verzeichnis-Whitelist fest: Leg...
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Bei der Installation von Nginx, MySQL, Tomcat und...
Methode 1: Bitte fügen Sie den folgenden Code nach...
In diesem Artikel wird hauptsächlich die Installa...
Frage: Beim Installieren Nginx in Docker ist der ...
Beim Anmelden am Stresstest sind viele verschiede...
1. Laden Sie MySql herunter und installieren Sie ...
Inhaltsverzeichnis 1. Ändern Sie die Datei my.cnf...