Gestern habe ich den Ereignis aufgezeichnet, den Wert des Tastaturschlüssels zu erhalten. Mit dem Wert ist es nichts anderes, als unterschiedliche Operationen für verschiedene Werte durchzuführen. Ich habe es auch zuvor benutzt, als ich über gierige Schlangen schreibe. Infolgedessen dauerte es lange, um es aufzuzeichnen, und ich hatte das Gefühl, dass es notwendig war, es aufzuzeichnen. Einerseits gab es tatsächlich etwas Gutes und andererseits erinnerte ich mich auch daran, dass die Funktion, die ich gerade erkannte, wieder ein Fremder war. Im Allgemeinen wurde es als eine Überprüfung der Vergangenheit angesehen und das Neue gelernt.
Lassen Sie uns zunächst das allgemeine Prinzip der Implementierung von Tastaturvorgängen analysieren, um die Div -Bewegung zu realisieren:
*--- Um die Bewegung von Div zu erkennen, ist der wichtigste Punkt, das DIV-Objekt zu erhalten
*--- poption: Absolute zieht die Div vollständig aus dem Dokumentstrom. Dieser Ort wird vermisst. Ich fand es erst, nachdem ich zurückgegangen war, um die gierige Schlange zu sehen. Es ist so schwindelig.
*--- Der Betrieb der Tastatur erhalten
*--- Geben unterschiedliche Antworten gemäß verschiedenen Tastaturvorgängen
Daran denke ich, dass ich wahrscheinlich den Code zuerst betrachten muss:
Erstens der HTML -Teil
<div id = "totzone">
Notieren Sie den tatsächlichen Betrieb von JavaScript
window.onload = function () {var obj = document.getElementById ("Showzone"); // Das Objekt wurde erhalten, dies ist das einfachste var a = 10; var toleft = toright = totop = tobottom = false; // Definieren Sie mehrere boolesche Variablen für die nachfolgende Richtungsoperation, und es scheint vier Richtungen zu sein var move = setInterval (function () {// Die Bewegungsdefinition an dieser Stelle ist tatsächlich bedeutungslos, um diese Methode offensichtlicher zu machen, wenn (toleft) {{{ obj.style.left = parseInt (obj.offsetleft-a)+"px"; // Es fühlt sich besser an, ParseInt zu schreiben, weil OffsetLeft nicht PX enthält, nicht "px"} wenn (toright) {obj.style.left = obj.offsetleft+· ° C. JavaScript? // Dieser klassische Timer ist ein großartiges Werkzeug für die Ausführung von Schleifen. Erinnern Sie sich noch an den Unterschied zwischen setInterval und setTimeout -document.onkeydown = function (Ereignis) {var event = event || window.event; Switch (Event.KeyCode) {// haha, holen Sie sich den Tastatur -Operationsfall 37: toleft = true; break; // Ändern Sie die Variablen und führen Sie die anfängliche Schleife fort, so dass Sie nicht anhalten oder stop case 38: totop = true; Break; Fall 39: toright = true; Break; Fall 40: tobottom = true; brechen; }}; document.onkeyUp = function (Ereignis) {Switch (Ereignis.KeyCode) {Fall 37: toleft = false; break; // Ändern Sie mich zurück und sagen Sie, Sie sollen anhalten und nicht in Fall 38: Totop = False; Break; Fall 39: Toright = False; Break; Fall 40: Tobottom = False; Break; }}; };Auf diese Weise haben wir die Anforderungen im Prinzipanalyse erfüllt, und gleichzeitig können wir die DIV, die Tasten nach oben, links und rechts durch die Tasten nach oben, unten, links und rechts bewegen. Als nächstes zeichnen wir die sensiblen Orte auf.
1. Die DIV muss absolut sein. Es lohnt sich nicht, nachdem es lange damit zu kämpfen hatte. Also habe ich ein Konzept "Dokumentfluss" überprüft und über ein Konzept gelernt.
Der Dokumentfluss wird normalerweise von oben nach unten von links nach rechts angeordnet. Dann ist dieses Element ein Knotenelement, ein riesiges Dom. Sprechen wir zuerst über andere Erklärungen. Was ich bevorzuge ist, dies zu erklären: Dokument + Stream. Wie der Name schon sagt, bedeutet das Dokument Webseitendokumente und Streams sind Ausgabemethoden. Einige Erklärungen sind Browser -Analysemethoden. Dies scheint lebendiger zu sein. Ein normaler Dokumentenfluss ist wie eine Ebene, und wo immer Sie ein Element setzen, ist es dort, wo es ist. Schwebende, feste Positionierung und relative Positionierung. Die Analyse von Absolute besteht darin, einen von seiner übergeordneten Layer-Etikett getrennten Stream zu regenerieren, genau wie z-Index vor 0, und der Z-Index befand sich oben, schwebend und oben und kann zufällig durch links und oben bewegt werden.
Ich kann die allgemeine Bedeutung verstehen, aber ich habe das Gefühl, dass einige Teile in der Sprache nicht effektiv ausgedrückt werden können und einige Punkte etwas verschwommen sind. Ich glaube, dass ich sie, wenn sich die Erfahrung ansammelt, sie tiefer verstehen.
2. Der Großbuchstaben von KeyCode, der Kleinbuchstaben von Onkeyup und Onkeydown sind auch Probleme, die nach dem Testen dieses Ortes entdeckt wurden. Für JavaScript ist jeder kleine Ort ein großes Problem.
3.. Schalter brechen; Ich begegne diesen Java oft, also werde ich nicht viel sagen
Das allgemeine Problem sind die oben genannten Punkte. Erinnerst du dich noch an die kommentierten Abkürzungsschlüssel und andere Abkürzungsschlüssel? Dies hat ein Problem. Wir haben darauf geantwortet, dass nur ein einzelner Schlüssel abzielt. Wenn wir einige Abkürzungsschlüssel verwenden möchten, wie sollen wir es einstellen?
Schauen wir uns den Code an:
document.onkeydown = function (Ereignis) {// Es ist immer noch der gleiche Code wie oben. Sehen Sie den Unterschied? var event = event || window.event; var bctrl = event.ctrlkey; // hier switch (Event.KeyCode) {case 37: toleft = true; break; Fall 38: if (bctrl) {obj.style.background = "gelb"; break;} totop = true; break; // hier, Fall 39: toright = true; break; Fall 40: tobottom = true; brechen; }};Hier stieß ich auf eine andere Eigenschaft des Ereignisobjekts, bei dem es sich um eine andere außerhalb von Keycode, Strlkey oder Kapitalisierung handelt. Seine Hauptfunktion besteht darin, den Status der Strg -Taste zu überprüfen. In der Tat gibt es zwei andere:
Altkey und ShiftKey sind die Überprüfungen über den Status der Alt -Taste bzw. der Schaltschlüssel. Auf diese Weise wissen Sie, wie Sie einen Abkürzungschlüssel festlegen.
Wenn ich es selbst schrieb, könnte ich zufrieden sein, aber wenn ich lese und suche, treffe ich immer meine nachdenklichen Freunde.
Fügen Sie den Code bei, wissen Sie, was zu tun ist:
Funktion limit () {var doc = [document.documentElement.clientwidth, document.documentElement.clientHeight] // Verhindern Sie obj.offsetleft <= 0 && (<span style = "font-family: arial, helvetica, sans-sserif; = 0); </span> // obj.offsettop <= 0 && (obj.style.top = 0); // DOC [0] auf der rechten Seite verhindern - obj.offsetleft - obj.offsetwidth <= 0 && (obj.style.left = doc [0] - obj.offsetwidth + "px"); // Verhindern Sie den unteren Überlauf -DOC [1] - obj.offsettop - obj.offseteight <= 0 && (obj.style.top = doc [1] - obj.offseteight + "px")}Was ich hier angehängt habe, ist, dass der Code im Internet so konzipiert ist, dass ich Überlauf verhindern soll, aber ich möchte diese Schreibmethode auch loben. Es ist viel kürzer als das, was ich entschlossen schreibe. Ich werde versuchen, in Zukunft kürzer zu schreiben.