原生前端代码的小demo：键盘控制div的上下移动以及颜色变化

最新推荐文章于 2021-11-17 23:13:29 发布
最新推荐文章于 2021-11-17 23:13:29 发布
阅读量6.3k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40137978/article/details/107090028
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用键盘控制DIV</title>
<style type="text/css">
html,body{overflow:hidden;}
body{margin:0;padding:0;}
pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;}
span{color:#999;}
#box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}
</style>
<script type="text/javascript">
window.onload = function ()
{
	var oBox = document.getElementById("box");
	var bLeft = bTop = bRight = bBottom = bCtrlKey = false;
	
	setInterval(function ()
	{	
		//此处的 bLeft、bRight、bTop、bBottom 函数在下方有定义
		if (bLeft)
		{	console.log("向左")
			oBox.style.left = oBox.offsetLeft - 10 + "px"
		}
		else if (bRight)
		{	
			console.log("向右")
			oBox.style.left = oBox.offsetLeft + 10 + "px"
		}
		
		if (bTop)
		{
			console.log("向上")
			oBox.style.top = oBox.offsetTop - 10 + "px"	
		}
		else if(bBottom)
		{
			console.log("向下")
			oBox.style.top = oBox.offsetTop + 10 + "px"
		}
		//防止溢出
		limit();
	},30);	
	
	// 当按下键盘按键的时候，触发对应的函数
	document.onkeydown = function (event)
	{
		var event = event || window.event;
		bCtrlKey = event.ctrlKey;
		
		switch (event.keyCode)
		{
			//此处keycode对应的键盘为"↑"键，如果对keycode不了解的话，可以 
			case 37:
				bLeft = true;
				break;
			case 38:
				if(bCtrlKey)
				{
					var oldWidth = oBox.offsetWidth;
					var oldHeight = oBox.offsetHeight;
					
					oBox.style.width = oBox.offsetWidth * 1.5 + "px";
					oBox.style.height = oBox.offsetHeight * 1.5 + "px";				
					
					oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
					oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
					
					break;	
				}
				bTop = true;
				break;
			case 39:
				bRight = true;
				break;
			case 40:
				if(bCtrlKey)
				{
					var oldWidth = oBox.offsetWidth;
					var oldHeight = oBox.offsetHeight;
					
					oBox.style.width = oBox.offsetWidth * 0.75 + "px";
					oBox.style.height = oBox.offsetHeight * 0.75 + "px";				
					
					oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
					oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
					
					break;	
				}
				bBottom = true;
				break;
			case 49:
				bCtrlKey && (oBox.style.background = "green");
				break;
			case 50:
				bCtrlKey && (oBox.style.background = "yellow");
				break;
			case 51:
				bCtrlKey && (oBox.style.background = "blue");
				break;
		}
		
		return false
	};

	document.onkeyup = function (event)
	{
		switch ((event || window.event).keyCode)
		{
			case 37:
				bLeft = false;
				break;
			case 38:
				bTop = false;
				break;
			case 39:
				bRight = false;
				break;
			case 40:
				bBottom = false;
				break;
		}
	};
	
	
	
	//防止溢出
	function limit()
	{
		var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]
		//防止左侧溢出
		oBox.offsetLeft <=0 && (oBox.style.left = 0);
		//防止顶部溢出
		oBox.offsetTop <=0 && (oBox.style.top = 0);
		//防止右侧溢出
		doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px");
		//防止底部溢出
		doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px")
	}
};
</script>
</head>
<body>
<pre>
红色方块为键盘操作区域，您可以进行如下操作：

上：↑ 下：↓ 左：← 右：→

Ctrl + 1 : 背景变为绿色(键盘上方的1)
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小
</pre>
<div id="box"></div>
</body>
</html>
wx-18538561085
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端基础 - WebApi （四）键盘事件
真実はただ一つ。
12-25 417
键盘事件 常用的三个 onkeyup：当某个按键被松开的时候后触发 onkeydown：当某个按键被按下的时候触发 onkeypress：当某个按键被按下的时候触发，不识别功能按钮(方向键、shift) 注意： 如果使用addEventListener不需要加on onkeypress和前面的两个事件区别在于它不识别功能键 三个时间的触发顺序是：keydown–keypress–keyup 键盘事件对象 属性 KeyCode：返回该键的ASCII码值 keydown和keyup事件对象是同样的，事
原生js实现键盘控制div移动且解决停顿问题
10-20
主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
JS实现用键盘控制DIV上下左右+放大缩小与变色
acugck6042的博客
12-03 122
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
用javascript写的小键盘
weixin_34387284的博客
04-25 116
　　最近研究了一些在线支付网站的前端代码，在看易宝支付的商户接入网站时候发现他们使用的javascript小键盘很不错。在前端页面通过鼠标输入字符、密码可以防止黑客通过记录你点击键盘的按钮窃取你的重要信息，这里将易宝支付的小键盘组件和大家分享下。 　　首先还是页面的目录结果，如下图： 　　页面最终的效果如图所示： 　　vkboard.js的代码： View Code var...
div键盘控制移动
漫天雪_昆仑巅
04-08 432
根据键盘的方向键上-下-左-右控制div移动， 代码如下： //键盘控制移动 $(document).keydown(function(event){ var keyNum = event.which; //获取键值 if(moveDiv!=null){ var keyNum = event.which; //获取键值 var Item = moveDi...
web_设置四个按键1,2,3,4 ；另外四个按键1，2，3，4；当按1，2，3，4时，对应数字变色
zhu_fangyuan的博客
08-04 443
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建方法f1() * 将id为a的按键赋给变量a1 * 将id为A的按键赋给变量a2 * 设置按键颜色 * * 设置a1的点击事件,即
微信小程序demo：简易抽奖(源代码+截图)
06-19
微信小程序demo：简易抽奖(源代码+截图)微信小程序demo：简易抽奖(源代码+截图)微信小程序demo：简易抽奖(源代码+截图)微信小程序demo：简易抽奖(源代码+截图)微信小程序demo：简易抽奖(源代码+截图)微信小程序demo...
微信小程序demo：商城分销系统(源代码+截图)
06-19
微信小程序demo：商城分销系统(源代码+截图)微信小程序demo：商城分销系统(源代码+截图)微信小程序demo：商城分销系统(源代码+截图)微信小程序demo：商城分销系统(源代码+截图)微信小程序demo：商城分销系统(源代码+...
微信小程序商城类完整demo：DFS：前端、PHP后端
03-15
7. 文件名称列表：“DFS-master”可能是该项目的主代码仓库或者主目录名，通常在GitHub或其他版本控制系统中，"master"分支代表项目的主线或默认分支，包含了项目的主要代码和资源。 总结起来，这个压缩包提供了一...
JS实现网页背景颜色与select框中颜色同时变化的方法
10-24
主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript利用键盘控制小方块的移动
11-20
本文实例为大家分享了利用键盘控制小方块的移动，供大家参考，具体内容如下 原理 1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动 2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
js实现上下左右键盘控制div移动
11-21
本文实例为大家分享了js上下左右键盘控制div移动的具体代码，供大家参考，具体内容如下 描述： div通过键盘事件上下左右实现div块的移动 效果：  实现： js： var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中 //
js软件软键盘输入！
06-04
这个脚本是一种可重复使用在系统中,比如图形键盘接口，文本字段，密码等领域textareas ，使他们能够只用鼠标输入文字。这也增加了您现有的键盘的便捷的特殊字符。说到与比利时，荷兰，德伏扎克，法文，德文，希腊文，希伯来文，意大利文，立陶宛文，挪威文，有多少瓦，波兰语程序员，葡萄牙语，俄语，西班牙语（西班牙） ，土耳其-女，土耳其-键盘，英国，美国的标准和美国国际键盘布局，可动态地选择。它可以轻松添加到其他版面！
方向键控制移动移动.cpp
Lyntion的Blog
10-14 2151
Code: #include    #include    #include    #include    #include       void gotoxy(int x,int y)    {        COORD c;        c.X=x;        c.Y=y;        SetConsoleCursorPosition(GetStdHandle(S
HTML+CSS+JavaScript实现键盘对div元素的移动（超详细）
qq_50485559的博客
11-17 1817
目录一、目标二、步骤三、代码1、HTML2、CSS3、JS 一、目标 1、小方块能够通过WASD控制移动 2、设置一个边框，让小方块只能在其中移动 3、当小方块超过边界时，从相反方向移动出来 二、步骤 1、创建HTML元素 2、用CSS设置边框和小方块样式 3、键盘响应 4、方块移动 5、超过边框后移动效果 三、代码 1、HTML ​ 需要设置一个盒子类，为小方块活动范围 ​ 在盒子里设置一个div元素，为小方块 <div class="box"><!--边框--> &l
js实现键盘控制div的移动，且解决停顿问题
起小点
05-29 867
解决原生js通过键盘控制div移动，解决停顿问题 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 100px; ...
html 上下左右键,js实现上下左右键盘控制div移动
weixin_39747568的博客
05-30 816
本文实例为大家分享了js上下左右键盘控制div移动的具体代码，供大家参考，具体内容如下描述：div通过键盘事件上下左右实现div块的移动效果：实现：js：var Method=(function () {return {EVENT_ID:"event_id",loadImage:function (arr) {var img=new Image();img.arr=arr;img.list=[];...
javascript学习之利用方向键控制div模块的移动
Ibelievesunshine的博客
06-15 1079
通过了测试
matlab下载.pdf
最新发布
07-14
matlab下载下载方式及注意事项
前端知识的汇总2023
02-20
前端开发是一个不断变化的领域，涉及到网页和移动应用程序的用户界面。一个优秀的前端开发人员需要熟练掌握HTML、CSS、JavaScript以及许多其他相关技术，例如React、Angular、Vue等框架，以及Node.js等后端技术。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值