JavaScript实现在键盘输入按键,浏览器进行显示的代码

  以下为实现在键盘输入按键,浏览器进行显示的代码和运行截图

目录

前言

一、在键盘输入按键,浏览器进行显示

1.1 运行流程及思想

1.2 代码段

1.3 JavaScript语句代码

1.4 运行截图


前言

1.若有选择,您可以在目录里进行快速查找;

2.本博文代码可以根据题目要求实现相关使用功能。同时可以实现自定义的设置;

3.本文介绍的是JavaScript代码习题,本博文使用的软件是HBuilder X3.7.9编写的代码,原则上其他软件如DW、VSCode或DW较低或较高版本的软件都是兼容的,若您有需要且编写软件不是HBX等软件原则上都是可以能正常运行的;

图1   编写软件举例(部分)

4.这里要特别说明,因为我使用的是HBX,所以是网页格式,我也单独把<script>语句粘贴了出来,有需要可直接复制<script></script>语句;

5.本博文代码是我在上学时写的,有一些地方没能完美实现,请包涵也请多赐教,若您发现了问题也请麻烦您将问题反馈给我,我好更正错误、总结完善、持续改善! 

6.博文通常需要在浏览器运行,通常会弹出表单,输入数值并得出结果。本文使用的是谷歌浏览器,推荐使用谷歌浏览器;

7.若涉及侵权,请联系删除;


提示:以下是本篇文章正文内容,下面案例可供参考

一、在键盘输入按键,浏览器进行显示

1.1 运行流程及思想

这是通过event.keyCode=="?"的编码,其中?及时可代替的数值,本文程序讲的是上下左右键的使用,若选择其他数值,需要讲数值更改到需要的,并将弹出文本进行修改即可。具体思想流程如下:

1.2 代码段

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function check()
			{
				if(event.keyCode=="37")
				  alert('您选项了左键');
				if(event.keyCode=="38")
				  alert('您选项了上键');
				if(event.keyCode=="39")
				  alert('您选项了右键');
				if(event.keyCode=="40")
				  alert('您选项了下键');
			}
		</script>
	</head>
	<body onkeydown="check()">
	</body>
</html>

1.3 JavaScript语句代码

代码如下(示例):

<script type="text/javascript">
			function check()
			{
				if(event.keyCode=="37")
				  alert('您选项了左键');
				if(event.keyCode=="38")
				  alert('您选项了上键');
				if(event.keyCode=="39")
				  alert('您选项了右键');
				if(event.keyCode=="40")
				  alert('您选项了下键');
			}
		</script>

1.4 运行截图

运行结果如下(示例):

1.4.1 浏览器弹出表单显示结果

当我在键盘按下左键(箭头)

 当我在键盘按下右键(箭头)

 当我在键盘按下上键(箭头)

 当我在键盘按下下键(箭头)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/18499.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能汽车实验二(视觉传感器标定)

实验二 视觉传感器标定&#xff08;实验报告&#xff09; 【实验目的】 1、了解开源图像处理库OpenCV的结构&#xff0c;掌握OpenCV的基本使用方法。 2、了解开源图像处理库OpenCV的基本模块功能&#xff0c;掌握常用图像处理方法。 3、掌握摄像机标定算法&#xff0c;学会使用…

igraph的layout布局

做图论的社区检测&#xff0c;需要画图显示&#xff0c;用igraph可以进行可视化。 igraph有几个布局&#xff0c;分别如下&#xff1a; layout_with_dh &#xff1a; The Davidson-Harel layout algorithm Place vertices of a graph on the plane, according to the simulat…

113-Linux_安装c/c++开发库及连接mysql数据库

文章目录 一.安装c/c开发库二.连接mysql数据库三.用户的管理与授权 mysql数据库的安装 一.安装c/c开发库 安装开发c/c的库&#xff0c;命令&#xff1a;apt install libmysqlclient-dev 二.连接mysql数据库 #include<stdio.h> #include<mysql/mysql.h>void fun…

Python+Selenium4环境搭建

set集合 怎么把列表种相同的数据和不同的数据取出来 1.把列表转为set集合 2.按照集合的交集 selenium 自动化测试&#xff1a;自动化测试就是通过代码或者是工具模拟人的行为来进行对WEB&#xff08;APP&#xff09;来进行操作。 QTP (HP公司)&#xff1a;以录制回放的模式…

CSS进阶

01-复合选择器 定义&#xff1a;由两个或多个基础选择器&#xff0c;通过不同的方式组合而成。 作用&#xff1a;更准确、更高效的选择目标元素&#xff08;标签&#xff09;。 后代选择器 后代选择器&#xff1a;选中某元素的后代元素。 选择器写法&#xff1a;父选择器 …

学系统集成项目管理工程师(中项)系列19b_成本管理(下)

1. 成本估算 1.1. 编制完成项目活动所需资源的大致成本 1.2. 在设计阶段多做些额外的工作可能减少执行阶段和产品运行时的成本 1.3. 项目估算的准确性随着项目的进展而提高 1.3.1. 【19下选48】 1.4. 针对完成活动所需资源的可能成本进行的量化评估 1.5. 容易被忽视的主要…

华为pbr双出口外线,指定内网单个vlan绑定单个出口外线上网

公司两条外线&#xff0c;vlan 10用nat走上面转发出去上网&#xff0c;vlan 20 走下面那条外线出去nat上网 AR2&#xff1a; interface GigabitEthernet0/0/0 ip address 6.6.6.1 255.255.255.0 interface GigabitEthernet0/0/1 ip address 154.1.2.3 255.255.255.0 interface…

JavaScript通过js的方式来判断一个数奇偶性的代码

以下为通过js的方式来判断一个数奇偶性的程序代码和运行截图 目录 前言 一、通过js的方式来判断一个数奇偶性&#xff08;html部分&#xff09; 1.1 运行流程及思想 1.2 代码段 二、通过js的方式来判断一个数奇偶性&#xff08;js部分&#xff09; 2.1 运行流程及思想 2…

Linux操作系统如何查看CPU型号信息?一条命令搞定

Linux操作系统服务器如何查看CPU处理器信息&#xff1f;使用命令cat /proc/cpuinfo可以查看CPU详细信息&#xff0c;包括CPU核数、逻辑CPU、物理CPU个数、CPU是否启用超线程等&#xff0c;阿里云服务器网分享Linux服务器查看CPU信息命令&#xff1a; 目录 Linux服务器查看CPU…

2023年贵州省职业技能大赛“网络安全” 项目比赛任务书

2023年贵州省职业技能大赛“网络安全” 项目比赛任务书 三、竞赛任务书内容 &#xff08;一&#xff09;拓扑图 &#xff08;二&#xff09;A模块基础设施设置/安全加固&#xff08;200分&#xff09; 一、项目和任务描述&#xff1a; 假定你是某企业的网络安全工程师&…

【Linux】Linux安装Redis(图文解说详细版)

文章目录 前言第一步&#xff0c;下载安装包第二步&#xff0c;上传安装包到/opt下&#xff08;老规矩了&#xff0c;安装包在opt下&#xff09;第三步&#xff0c;解压安装包第四步&#xff0c;编译第五步&#xff0c;安装第六步&#xff0c;配置redis第七步&#xff0c;设置开…

迁移学习

迁移学习 什么是迁移学习 迁移学习【斯坦福21秋季&#xff1a;实用机器学习中文版】 迁移学习&#xff08;Transfer Learning&#xff09;是一种机器学习方法&#xff0c;它通过将一个领域中的知识和经验迁移到另一个相关领域中&#xff0c;来加速和改进新领域的学习和解决问…

“土狗”的季节,meme热潮回归

文/章鱼哥 出品/陀螺财经 meme代币的热度好像又回来了&#xff0c;两周前推出的PEPE创下了历史新高。尽管加密货币市场仍处于漫长熊市中&#xff0c;但人们似乎仍然对风险投资保有兴趣。 meme代币作为基于互联网模因的高波动数字资产&#xff0c;似乎没有太多实用性。它们的价格…

AI仿写软件-仿写文章生成器

AI仿写软件&#xff1a;高效出色的营销利器 作为互联网时代的营销人员&#xff0c;我们不仅需要品牌意识&#xff0c;还必须深谙营销技巧。万恶的时限压力使得我们不得不在有限的时间内输出更多的文本内容&#xff0c;以便吸引更多的关注。那么&#xff0c;如何解决这个问题呢…

基数树RadixTree

转自&#xff1a;基数树RadixTree - 知乎 1. 基数树概述 对于长整型数据的映射&#xff0c;如何解决Hash冲突和Hash表大小的设计是一个很头疼的问题。radix树就是针对这种稀疏的长整型数据查找&#xff0c;能快速且节省空间地完成映射。借助于Radix树&#xff0c;我们可以实现…

用chatgpt实现 java导出excel复杂表。

记录一次使用chatgpt解决实际问题的&#xff0c;需求是在页面添加一个订单导出excel的功能&#xff0c;订单编号、订单明细&#xff0c;相同订单编号合并单元格&#xff0c;模板如下 表头表尾不用说&#xff0c; 主要是表格内容部分&#xff0c;左边是订单编号&#xff0c;右边…

ChatGPT常见问题及其解决方法汇总

好久没有更新过技术类的文章了&#xff0c;希望本篇文章能够对你有所帮助&#xff0c;今天这篇博客将会把ChatGPT注册中可能遇到的问题彻头彻尾的讲一下&#xff0c;创作不易&#xff0c;如果感觉有帮助的话就动动你发财的小手点个收藏点个赞吧。如有需要转载请附上原文链接&am…

微软骚操作恶心Win10用户,上网得先看广告

IE 浏览器在几个月前被彻底禁用&#xff0c;预装了快30年的老古董也确实到了退役的时候。 而微软也早有准备&#xff0c;2015年随着 Win10 发布推出了 Microsoft Edge 浏览器。 2020年迁移到 Chromium 内核让其成为了主流浏览器之一。 和 Chromium 系其他浏览器一样支持扩展插…

Portraiture4最新版滤镜P图一键磨皮插件

今天coco玛奇朵给大家带来了一款ps磨皮插件&#xff0c;超级简单好用。Portraiture 滤镜是一款 Photoshop&#xff0c;Lightroom 和 Aperture 插件&#xff0c;DobeLighttroom 的 Portraiture 消除了选择性掩蔽和逐像素处理的繁琐的手工劳动&#xff0c;以帮助您在肖像修整方面…

TiDB实战篇-PD调度常见问题处理方法

常见的问题 调度产生和执行 常见的调度类型 参数调度的速度 调度典型场景 Leader分布不均匀监控 leader分布算法&#xff0c;每一个leader的size作为总和&#xff0c;还有TiKV的剩余空间等等。 可以手动设置权重。 分布不均衡处理 TiKV节点下线速度慢 TiKV下线速度慢解决方法 …