当前位置： 首页 > news >正文

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

news 2025/9/18 22:24:34

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

目录

前言

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

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 浏览器弹出表单显示结果

当我在键盘按下左键（箭头）

 当我在键盘按下右键（箭头）

 当我在键盘按下上键（箭头）

 当我在键盘按下下键（箭头）

相关文章：

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

以下为实现在键盘输入按键&#xff0c;浏览器进行显示的代码和运行截图 目录 前言 一、在键盘输入按键&#xff0c;浏览器进行显示 1.1 运行流程及思想 1.2 代码段 1.3 JavaScript语句代码 1.4 运行截图 前言 1.若有选择&#xff0c;您可以在目录里进行快速查找&#xf…...

编程日记 2023/5/29 17:44:35

精炼计算机网络——物理层（二）

文章目录 前言2.4信道复用技术2.4.1 频分复用、时分复用和统计时分复用2.4.2 波分复用2.4.3 码分复用 2.5 数字传输系统2.6 带宽接入技术2.6.1 ADSL技术2.6.2 光纤同轴混合网&#xff08;HFC网&#xff09;2.6.3 FTTx技术 总结 前言 上篇文章&#xff0c;我们初步了解了物理层…...

编程日记 2023/5/11 5:53:20

ChatGPT直接访问，Edge浏览器-免费ChatGPT保姆级教程

人工智能大浪潮已经来临&#xff0c;对于ChatGPT&#xff0c;我觉得任何一个玩互联网的人&#xff0c;都应该重视起来&#xff0c;用起来。但是国内使用需要解决科学上网、注册、收费等繁琐问题。 所以&#xff0c;今天这篇文章就来推荐一个插件&#xff0c;无需任何繁琐操作&…...

编程日记 2023/5/11 5:48:19

1010. 总持续时间可被 60 整除的歌曲

题目&#xff1a; 在歌曲列表中&#xff0c;第 i 首歌曲的持续时间为 time[i] 秒。 返回其总持续时间&#xff08;以秒为单位&#xff09;可被 60 整除的歌曲对的数量。形式上&#xff0c;我们希望下标数字 i 和 j 满足 i < j 且有 (time[i] time[j]) % 60 0。 示例 1&a…...

编程日记 2023/5/11 5:43:18

基于Spring Boot的婚恋系统

在当今的社会&#xff0c;婚恋市场的需求量越来越大&#xff0c;而互联网技术的发展也为婚恋市场的发展提供了更多的机会。基于Spring Boot的婚恋系统正是为了满足市场需求而诞生。 什么是Spring Boot Spring Boot是一个非常流行的Java框架&#xff0c;它可以极大地简化Sprin…...

编程日记 2023/5/11 5:38:17

unity愤怒的小鸟学习制作（一）

基础知识已经差不多了&#xff0c;现在开始模仿敲代码然后在模仿中熟悉软件和语法 视频链接和素材如下&#xff1a;视频 目录 第一部分&#xff1a;游戏逻辑1、新建2D工程2、创建三个场景3、导入游戏需要的资源4、开始编辑02-game4.1 裁切图片4.2 初步编辑4.3 实现小鸟的拖拽4…...

编程日记 2023/5/11 5:33:16

建筑专业可以转行学云计算吗？

当然可行。 在过去的几年中&#xff0c;我们已经帮助很多建筑土木工程专业的同学转行学习云计算技术&#xff0c;尤其是在建筑信息化编程方向。近年来&#xff0c;云计算行业持续发展&#xff0c;涉及到众多领域&#xff0c;如云数据中心、云安全、云存储、云计算机服务等。云…...

编程日记 2023/5/11 5:28:15

网络安全：namp扫描工具

-sP可以扫描一个网段ip以及状态和基本信息&#xff0c;10.1.1.2-3就是扫描2和3这两个ip的主机 -p可以扫描指定ip对应主机的端口号&#xff0c;可以是一个范围 nmap简单扫描&#xff1a;nmap 地址 检查地址是否在线以及open的端口号 在端口开放&#xff0c;不一定可以与对方正常…...

编程日记 2023/5/11 5:23:14

java错题总结(19-21页)

链接&#xff1a;关于Java中的ClassLoader下面的哪些描述是错误的_用友笔试题_牛客网 来源&#xff1a;牛客网 B&#xff1a;先讲一下双亲委派机制&#xff0c;简单来说&#xff0c;就是加载一个类的时候&#xff0c;会往上找他的父类加载器&#xff0c;父类加载器找它的父类加…...

编程日记 2023/5/11 5:18:13

总结846

学习目标&#xff1a; 月目标&#xff1a;5月&#xff08;张宇强化前10讲&#xff0c;背诵15篇短文&#xff0c;熟词僻义300词基础词&#xff09; 周目标&#xff1a;张宇强化前3讲并完成相应的习题并记录&#xff0c;英语背3篇文章并回诵 每日必复习&#xff08;5分钟&#…...

编程日记 2023/5/11 5:13:12

[ubuntu][原创]ubuntu上安装stable-diffusion-webui

下载源码&#xff1a; git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui 一般方法就是&#xff1a; bash webui.sh 但是很遗憾这个国内很难成功&#xff0c;而且很容易陷入困境&#xff0c;因此需要下面方法 核心思想&#xff1a;环境和源码分开安装 下…...

编程日记 2023/5/11 5:08:11

【数组排序算法】

目录 一、数组排序算法1、冒泡排序算法1.1、图形解释1.2、冒泡算法的脚本写法 二、直接选择排序1.1、动态图解1.2、直接选择排序算法的脚本编写 三、直接插入排序1.1、基本思想&#xff1a;1.2、动态图解1.3、直接插入排序的算法脚本编写 四、反向序列算法1.1、反向序列算法的脚…...

编程日记 2023/5/11 5:03:10

制造企业选择库存管理条码工具需要关注哪些点？

Dynamsoft Barcode Reader SDK 一款多功能的条码读取控件&#xff0c;只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。能支持多种图像文件格式以及从摄像机或扫描仪获取的DIB格式。使用Dynamsoft Barcode Reader SDK&#xff0c…...

编程日记 2023/5/11 4:58:04

SPI配置

I/O配置 主输出、从输入&#xff08;MOSI&#xff09; 主出从入&#xff08;MOSI &#xff09;引脚是主器件的输出和从器件的输入&#xff0c;用于主器件到从器件的串行数据传输。当SPI 配置为主器件时&#xff0c;该引脚为输出&#xff0c;当 SPI 配置为从器件时&#xff0c;该…...

编程日记 2023/5/11 4:53:02

给你们讲个笑话——低代码会取代程序员

今天是正经男&#xff0c;我们严肃讨论一下一直以来争吵不休的取代问题。 低代码开发平台&#xff0c;低代码技术会取代开发人员么&#xff1f; 一、背景 低代码开发平台的普及&#xff0c;让很多公司对快速生成应用抱有很大期望。甚至有人认为&#xff0c;低代码开发平台未来…...

编程日记 2023/5/11 4:48:01

Kotlin的出现无疑是为了超越Java而存在

Kotlin的出现无疑是为了超越Java而存在。在Google I/O 2017中&#xff0c;Google 宣布 Kotlin 成为 Android 官方开发语言&#xff0c;背景就是Oracle告Google侵权使用java。众所周知&#xff0c;Java的跨平台的开发语言&#xff0c;得益于虚拟机。我比较关注Kotlin用于Android…...

编程日记 2023/5/11 4:43:00

基于C#开发 B/S架构的实验室管理系统 云LIS系统（MVC + SQLserver + Redis）

一、云LIS系统是将各种样本、免疫、临检、放免、及实验用的分析仪器&#xff0c;通过网络管理和传输实验分析过程中全部数据。对每一专业&#xff0c;实现检验申请、样本采集、样本核收、联机检验、质量控制、报告审核到报告发布的全环节的信息化管理平台。 二、基于B/S架构的云…...

编程日记 2023/5/11 4:37:59

Webpack5有哪些更新？

52. Webpack5有哪些更新&#xff1f; 1. 更快的构建速度 Webpack5 在构建速度方面做出了一些改进&#xff0c;其中最重要的改进是使用持久性缓存。持久性缓存可以将中间结果存储在硬盘上&#xff0c;这些结果可以在下一次构建时被重用&#xff0c;从而减少了构建时间。此外&a…...

编程日记 2023/5/11 4:32:58

前端Vue

前端Vue 基础语法 <div id"div"><h1>This is a data:{{data}}</h1><h1>This is a method:{{method()}}</h1> </div><script>//创建vue实例需要传入配置对象,el指定一个元素作为容器,data保存需要的数据,methods定义函数…...

编程日记 2023/5/11 4:27:57

SpringCloud 分布式事务组件之Seata

目录 背景介绍什么是分布式事务什么叫做逆向补偿呢互联网最流行的分布式事务组件seata总结 背景 大家好&#xff0c;今天给大家分享一个在2022年出去面试Java几乎必问的一个技术&#xff0c;那就是seata。什么&#xff1f;&#xff1f;你才看了第一句话心里有闪现了无数个问…...

编程日记 2023/5/11 4:22:56

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/9/18 19:23:34

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/9/13 17:48:42

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/9/17 8:45:28

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/9/14 12:35:14

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/9/15 16:50:37

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/9/18 12:53:12

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/9/5 14:54:22

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2025/9/9 10:05:51