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

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

news 2026/2/10 17:53:31

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

目录

前言

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

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

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

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

编程新知 2026/2/5 4:39:03

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

编程新知 2026/1/29 17:39:27