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

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

news 2026/2/10 12:52:02

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

目录

前言

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

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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/2/9 6:48:42

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

编程新知 2026/2/10 3:55:32

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

编程新知 2025/12/22 18:59:47