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

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

news 2026/1/12 8:12:54

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

目录

前言

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

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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/1/10 12:06:04

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/10 4:51:48

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/1/5 17:19:16

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/1/9 0:47:15

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2026/1/10 8:49:38

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2026/1/3 13:48:55

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2026/1/9 8:21:08