JS-鍵盤事件之方向鍵移動元素

注意三點:
?1:事件名稱onkeydown。
?2:事件加給document,而非window。
?3: 把元素的top,left值分別用offsetTop,offsetLeft來設定。

?

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>鍵盤移動</title><style type="text/css">*{margin: 0;padding: 0;}h3{position: absolute;width: 200px;background: cadetblue;color: #fff;padding: 20px;}</style></head><body><h3 id="h3">注意三點:<br />1:事件名稱onkeydown<br />2:事件加給document,而非window。<br />3: 把元素的top,left值分別用offsetTop,offsetLeft來設定</h3></body>

js效果:【這里用了switch語句來進行判斷】

<script type="text/javascript">window.onload = function(){var oH3 = document.getElementById("h3");document.onkeydown = function(ev){var ev = ev || window.event;switch(ev.keyCode){case 37:case 100:oH3.style.left =  oH3.offsetLeft - 10 + "px";break;case 38:case 104:oH3.style.top = oH3.offsetTop - 10 + "px";break;case 39:case 102:oH3.style.left = oH3.offsetLeft + 10 + "px";break;case 40:case 98:oH3.style.top = oH3.offsetTop + 10 + "px";break;default:console.log("請按上下左右鍵");break;}console.log(oH3.offsetTop+"+"+oH3.style.top);console.log(ev.keyCode);}}</script>

鍵值 keyCode說明:

數字小鍵盤中對應的上下左右:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/258909.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/258909.shtml
英文地址,請注明出處:http://en.pswp.cn/news/258909.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Swift學習字符串、數組、字典

一.字符串的使用 let wiseWords "\"I am a handsome\"-boy" var emptyString "" if emptyString.isEmpty{ println("這是一個空值") }簡單說明&#xff1a;isEmpty方法是用來判斷字符串是否為空值的&#xff0c;之后會執行if語句中的…

python對excel操作簡書_Python讀寫Excel表格,就是這么簡單粗暴又好用

最近在做一些數據處理和計算的工作&#xff0c;因為數據是以.CSV格式保存的&#xff0c;因此剛開始直接用Excel來處理。 但是做著做著發現重復的勞動&#xff0c;其實并沒有多大的意義&#xff0c;于是就想著寫個小工具幫著處理。 以前正好在一本書上看到過&#xff0c;使用Pyt…

九度 1470 調整方陣

題目描述&#xff1a; 輸入一個N&#xff08;N<10&#xff09;階方陣&#xff0c;按照如下方式調整方陣&#xff1a;1.將第一列中最大數所在的行與第一行對調。2.將第二列中從第二行到第N行最大數所在的行與第二行對調。依此類推...N-1.將第N-1列中從第N-1行到第N行最大數所…

halcon/c++接口基礎 之 halcon初認識

從今天開始&#xff0c;開始更新博客&#xff0c;主要分享自己最近正在翻譯的Halcon/C教程。先給出第一篇文章&#xff0c;由于此文章&#xff0c;是用latex寫的&#xff0c;直接導成html&#xff0c;保存在七牛云存儲上&#xff0c;所以直接點擊鏈接就看到&#xff0c;后面我將…

指數型組織形成的 9 大驅動因素

指數時代&#xff0c;是一個前所未有的激動人心的世界。 Airbnb, 谷歌, 亞馬遜和GitHub這些知名的公司&#xff0c;都有一個讓人稱羨的共同點&#xff0c;那就是——他們都是非常成功的指數型組織&#xff08;Exponential Organizations&#xff0c;ExO’s&#xff09;。 “在當…

Java for LeetCode 061 Rotate List

Given a list, rotate the list to the right by k places, where k is non-negative. For example: Given 1->2->3->4->5->NULL and k 2, return 4->5->1->2->3->NULL. 解題思路&#xff1a; 只需找到對應的位置&#xff0c;然后指向head&…

mysqld:表mysql.plugin不存在_99%測試工程師不知道的數據庫知識|干貨

點擊上方“藍字”關注我們數據庫&#xff0c;簡而言之可視為電子化的文件柜——存儲電子文件的處所&#xff0c;用戶可以對文件中的數據進行新增、查詢、更新、刪除等操作。所謂“數據庫”是以一定方式儲存在一起、能與多個用戶共享、具有盡可能小的冗余度、與應用程序彼此獨立…

Windows Phone 執行模型概述

Windows Phone 執行模型控制在 Windows Phone 上運行的應用程序的生命周期&#xff0c;該過程從啟動應用程序開始&#xff0c;直至應用程序終止。 該執行模型旨在始終為最終用戶提供快速響應的體驗。為此&#xff0c;在任何給定時間內&#xff0c;Windows Phone 僅允許一個應用…

halcon/c++接口基礎 之 構造函數與Halcon算子

Halcon/C提供了構造函數&#xff0c;主要基于適合的Halcon算子。比如說HImage和HBarCode基于read_image and create_bar_code_model。 請注意當前的Halcon版本針對不同的算子構造函數的功能不同。如下我們介紹了一些最常用的Halcon算子&#xff0c;而一個完整的構造函數列表可…

Android Wifi簡單的梳理【轉】

本文轉載自&#xff1a;http://blog.csdn.net/gabbzang/article/details/10005411 代表一個已經配置過的網絡。包含網絡ID(networkId)、該網絡ID代表的網絡的BSSID和SSID、加密機制、密碼等信息。 WifiInfo&#xff1a; 代表一個正在建立或者已經建立的網絡連接。該網絡的BSSID…

fenby C語言 P30

int a[5]&#xff0c;*pa; int a[5],*p&a[0]; #include <stdio.h> int main(void){ int a[5],*pa,i; for(i0;i<5;i) { *p1; p; }pp-5;for(i0;i<5;i,p)printf("%d\n",*p);return 0;}轉載于:https://www.cnblogs.com/amiaojiang/p/4507114.html

bat自動輸入用戶名和密碼_「小白到大牛之路6」交換機后臺管理之重復輸入用戶名和密碼...

項目需求解決項目5中存在的問題&#xff1a;用戶名和密碼只能輸入一次。如果輸入錯誤&#xff0c;就沒有機會重新輸入。項目實現#include int main(void) {// 定義變量&#xff0c;用來表示用戶名和密碼char name[32];char password[16];//輸入用戶名和密碼while (1) {// 輸入用…

并行計算簡介

轉自&#xff1a;http://www.cnblogs.com/wasd/archive/2009/04/07/1430859.html 并行計算簡介 作者&#xff1a; Blaise Barney, 勞倫斯利弗莫爾國家實驗室 譯者&#xff1a;盧洋&#xff0c;同濟大學&#xff0c;2009年4月 原文地址&#xff1a;https://computing.llnl.gov/t…

開場 Live,分享點干貨——「深入了解 Node.js 包與模塊機制」

先放上 Live 地址&#xff1a; www.zhihu.com/lives/84274… 本次 Live 將深入剖析 Node.js 包與模塊機制&#xff0c;包括且不限于解析 Node.js 源碼、社區規范等。本人認為這是作為一個合格 Node.js 開發者哪怕是不深入也要了解的姿勢之一。 本次 Live 主要包括以下內容&…

halcon/c++接口基礎 之 析構函數和Halcon算子

所有的HALCON/C類都提供了默認的析構函數用來自動銷毀對應的內存。對于某些類&#xff0c;析構函數基于適合的算子&#xff1a; Windows: HWindow類的析構函數基于close_window關閉窗口。注意&#xff1a;算子本身不是析構器。你可以選擇調用CloseWindow關閉窗口&#xff0c;…

140字

跑男他們這一組做的游戲&#xff0c;首先按任務來 他們做的技術難度很高感覺。需要在android里面用flash我自己從來沒有接觸過。而且制作的難度也很大&#xff0c;反正就目前難度系數來說的話&#xff0c;可以秒殺我的DB天氣了。然后就是吐槽的也是我最不能忍的就是美化方面做得…

ios 上傳圖片到阿里云的oss_JEECG BOOT 上傳如何同時支持阿里OSS、Minio、本地存儲

Jeecg-Boot 提供了文件及圖片上傳功能&#xff0c;前兩個文件已介紹了MinIO和OSS配置&#xff0c;現在可根據需要選擇上傳方式。文件上傳接口(圖片/文件)在yml文件中可切換圖片/文件存儲方式訪問路徑上送參數說明在yml文件中可切換圖片/文件存儲方式local為本地存儲minio為使用…

halcon/c++接口基礎 之內存管理

所有的HALCON類&#xff0c;不僅僅HImage,HRegion,HTuple&#xff0c;HFramegrabber等等&#xff0c;還有面向過程的方法中使用的Hobject&#xff0c;都可以使用默認的析構器自動釋放內存。 &#xff08; see also section 2.4 “Destructors and Halcon Operators”)&#xf…

tomcat 禁用access.log

修改 server.xml 注釋掉,如: <!-- Access log processes all example.Documentation at: /docs/config/valve.htmlNote: The pattern used is equivalent to using pattern"common"<Valve className"org.apache.catalina.valves.AccessLogValve" dir…

bzoj 3505

3505: [Cqoi2014]數三角形 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 698 Solved: 424[Submit][Status][Discuss]Description 給定一個nxm的網格&#xff0c;請計算三點都在格點上的三角形共有多少個。下圖為4x4的網格上的一個三角形。 注意三角形的三點不能共線。 In…