Hier, j'ai enregistré l'événement pour obtenir la valeur de la clé du clavier. Avec la valeur, ce n'est rien de plus que faire des opérations différentes pour différentes valeurs. Je l'ai également utilisé auparavant en écrivant sur les serpents gourmands. En conséquence, il a fallu beaucoup de temps pour l'enregistrer, donc j'ai senti qu'il était nécessaire de l'enregistrer. D'une part, il y avait en effet quelque chose de bien, et d'autre part, je me suis également rappelé que la fonction que je viens de réaliser était à nouveau un étranger. En général, il a été considéré comme une revue du passé et apprendre le nouveau.
Analysons d'abord le principe général de la mise en œuvre des opérations du clavier pour réaliser le mouvement DIV:
* --- Pour réaliser le mouvement de Div, le point le plus important est d'obtenir l'objet div
* --- Postion: Absolut traîne complètement la div complètement hors du flux de documents. Cet endroit est manqué. Je ne l'ai trouvé qu'après être retourné pour voir le serpent gourmand. C'est tellement étourdi.
* --- le fonctionnement de l'obtention du clavier
* --- Donnez différentes réponses en fonction de différentes opérations de clavier
C'est ce à quoi je pense avoir probablement besoin de faire attention, regardons d'abord le code:
Premièrement, la partie HTML
<div id = "showzone">
Puis enregistrez le fonctionnement réel de JavaScript
window.onLoad = function () {var obj = document.getElementyId ("showZone"); // L'objet a été obtenu, il s'agit du var a = 10; var toleft = TORGHT = TOTOP = tabottom = false; // définir plusieurs variables booléennes pour l'opération de direction ultérieure, et il semble que ce soit quatre directions var Move = setInterval (function () {// La définition de mouvement à cet endroit est en fait dénuée de sens, juste pour rendre cette méthode plus évidente si (TOLEFT) { obj.style.left = parseInt (obj.offsetleft-a) + "px"; // il est préférable d'écrire ParseInt. JavaScript? // Cette minuterie classique est un excellent outil pour l'exécution de la boucle. Vous souvenez-vous encore de la différence entre setInterval et setTimeOut document.onkeydown = function (event) {var event = event || window.event; switch (event.KeyCode) {// haha, obtenez le case du clavier 37: TOLEFT = true; Break; // modifie les variables et continuez à exécuter la boucle initiale, afin que vous ne puissiez pas arrêter ou arrêter le cas 38: totop = true; break; Cas 39: TORGHT = Vrai; Break; Cas 40: Tobottom = True; Break; }}; document.onKeyUp = function (event) {switch (event.KeyCode) {cas 37: TOLEFT = false; Break; // change-moi en retour et te dire d'arrêter et de ne pas déplacer le cas 38: totop = false; pause; Cas 39: TORGHT = FALSE; BREAK; Cas 40: Tobottom = False; Break; }}; };De cette façon, nous avons rempli les exigences en matière d'analyse de principe, et en même temps, nous pouvons déplacer les boutons Div vers le haut, vers le bas, gauche et droit à travers les boutons vers le haut, vers le bas, la gauche et la droite. Ensuite, enregistrons les endroits sensibles.
1. La div doit être absolue. Cela ne vaut pas la peine après avoir lutté avec cela pendant longtemps. J'ai donc vérifié et appris un concept "flux de documents".
Le flux de documents est généralement disposé de haut en bas, de gauche à droite, puis cet élément est un élément de nœud, un énorme dom. Parlons d'abord d'autres explications. Ce que je préfère, c'est expliquer ceci: Document + Stream. Comme son nom l'indique, le document signifie les documents de page Web et les flux sont des méthodes de sortie. Certaines explications sont des méthodes d'analyse du navigateur. Cela semble être plus vivant. Un flux de documents normal est comme un plan, et partout où vous mettez un élément, c'est là qu'il est. Flacement, positionnement fixe et positionnement relatif. Ici, l'analyse absolue est de régénérer un flux, séparé de son étiquette de couche parent, tout comme l'index z était 0 avant, et l'index Z était au-dessus de celui-ci, flottant et en haut, et il peut être déplacé au hasard à gauche et en haut.
Je peux comprendre le sens général, mais je pense que certaines parties ne peuvent pas être exprimées efficacement dans le langage, et certains points sont un peu floues. Je crois que lorsque l'expérience s'accumule, je peux les comprendre plus profondément.
2. La maîtrise en majuscule de Keycode, la minuscule de Onkeyup et Onkeydown est également des problèmes découverts après avoir testé cet endroit. Pour JavaScript, chaque petit endroit est un gros problème;
3. Break in Switch; Je rencontre souvent ce java, donc je ne dirai pas grand-chose
Le problème général est les points ci-dessus. Vous souvenez-vous encore des clés de raccourci commentées et d'autres clés de raccourci? Cela a un problème. Nous avons répondu qu'il ne cible qu'une seule clé. Si nous voulons utiliser des touches de raccourci, comment devons-nous la définir?
Jetons un coup d'œil au code:
document.onkeydown = function (event) {// C'est toujours le même code que ci-dessus. Voyez-vous la différence? var event = event || window.event; var bctrl = event.ctrlkey; // ici switch (event.KeyCode) {case 37: TOLEFT = true; Break; Cas 38: if (bctrl) {obj.style.background = "jaune"; break;} totop = true; break; // ici, cas 39: TORGHT = true; break; Cas 40: Tobottom = True; Break; }};Ici, j'ai rencontré une autre propriété de l'objet de l'événement, qui est un autre à l'extérieur de Keycode, Ctrlkey ou Capitalisation. Sa fonction principale est de vérifier l'état de la touche CTRL. En fait, il y en a deux autres:
Altkey et ShiftKey sont les vérifications de l'état de la touche ALT et des touches Shift respectivement. De cette façon, vous savez comment définir une clé de raccourci.
En fait, si je l'écrivais moi-même, je pourrais être satisfait, mais quand je lis et recherche, je rencontre toujours mes amis réfléchis.
Joignez le code, savez-vous quoi faire:
Function Limit () {var doc = [document.DocumentElement.ClientWidth, Document.DocumentElement.ClientHeight] // Empêcher Obj.offsetleft <= 0 && (<span style = "Font-Family: Arial, Helvetica, Sans-Serif;"> Obj </pan> <Span Style = "Font-Family: Arrial, Helvetica, Sans-Serif;". = 0); </span> // empêche obj.offsettop <= 0 && (obj.style.top = 0); // empêche doc [0] sur le côté droit - obj.offsetleft - obj.offsetwidth <= 0 && (obj.style.left = doc [0] - obj.offsetWidth + "px"); // Empêche le dépassement inférieur Doc [1] - obj.offsettop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}Ce que j'ai joint ici, c'est que bien que le code sur Internet soit conçu pour empêcher le débordement, je veux également louer cette méthode d'écriture. C'est beaucoup plus court que ce que j'écris de manière décisive. J'essaierai d'écrire plus court à l'avenir.