Heim > Web-Frontend > js-Tutorial > Drei häufig verwendete JS-Zeitantworten

Drei häufig verwendete JS-Zeitantworten

零到壹度
Freigeben: 2018-04-03 18:00:33
Original
2038 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich drei häufig verwendete JS-Zeitantworten vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Hier sind einige häufig verwendete Zeitantworten, die einfach zu verwenden und sehr effektiv sind.

1. Auslöser durch Tastendruck

Diese Art der Ereignisreaktion kommt sehr häufig vor und kommt auch von Anfang an vor. Um ein einfaches Beispiel zu geben:

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>
Nach dem Login kopieren

Der Kern dieser Art von Methode besteht darin, onclick+Funktionsnamen zur Schaltflächenbeschriftung hinzuzufügen, um die Funktion auszulösen.

2. Mausauslöser oder Eingabeauslöser.

Die Mängel der ersten Methode sind eigentlich sehr offensichtlich. Wenn ich beispielsweise einen Datenstapel verarbeiten möchte und viele Eingabefelder vorhanden sind, muss ich dann nach jedem Feld einen Bestätigungsschlüssel hinzufügen? Dies ist für Benutzereingaben sehr unzumutbar, daher ist es viel effizienter, beim Ausfüllen eines Formulars oder mehrerer Eingabefelder die Maus oder die Eingabetaste zu verwenden, um den Effekt auszulösen.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>
Nach dem Login kopieren

Der Kern besteht darin, die Funktion im Eingabefeld mit onchange aufzurufen. Nach dem Ausfüllen wird die Funktion aufgerufen, indem Sie mit der Maus auf eine beliebige Stelle klicken oder die Eingabetaste drücken Verarbeitung.

3. Jederzeit auslösen

Für reale Beispiele können Sie die Online-Hexadezimalkonvertierung auf der Webseite ausprobieren Das Drücken der Bestätigungstaste erfordert nicht, dass Sie die Eingabetaste drücken. Sie können es jederzeit eingeben und konvertieren. Unter Einbeziehung des Rechners auf dem Mobiltelefon berechnet es den Eingabewert in Echtzeit.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>
Nach dem Login kopieren

Der Kern der Verwendungsmethode ist oneKeyUp + Methodenname. Darüber hinaus gibt es auch die Schlüsselwörter onkeypress, oneKeyDown usw. Ich persönlich finde oneKeyUp praktischer.

Verwandte Empfehlungen:

Aufschlüsselung und eingehende Analyse der Reaktionszeit von Webtransaktionen

jQuery-Timeline-Effekte basierend auf der vertikalen Bootstrap-Antwort

10 Möglichkeiten, wie Sie Ihre Node.js-Anwendung schneller ausführen lassen. Tipps

Das obige ist der detaillierte Inhalt vonDrei häufig verwendete JS-Zeitantworten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage