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

news2024/11/16 3:29:53

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

目录

前言

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

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

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《灰盒模型在非侵入式体外估计糖化血红蛋白百分比和数字脉搏波形的推导和验证》阅读笔记

目录 一、论文摘要 二、论文十问 Q1&#xff1a;论文试图解决什么问题&#xff1f; Q2&#xff1a;这是否是一个新的问题&#xff1f; Q3&#xff1a;这篇文章要验证一个什么科学假设&#xff1f; Q4&#xff1a;有哪些相关研究&#xff1f;如何归类&#xff1f;谁是这一课…

84.python input输入函数知识拓展

文章目录 1. input函数知识回顾2. input常犯错误解析3. 用函数转换从终端输入的数据3.1 输入的数为整数&#xff0c;则用int转换为整数3.2 输入的数为浮点数&#xff0c;则用float转换为浮点数3.3 不考虑输入的数据类型&#xff0c;则用eval函数转换 4. 变量的多种赋值方式4.1 …

OpenCV教程——OpenCV环境配置及第一个测试代码

1.OpenCV简介 OpenCV是一个计算机视觉的开源库。英文全称是&#xff1a;Open Source Computer Vision Library。 常用的OpenCV的核心模块&#xff1a; Image ProcessCamera Calibration and 3D ReconstructionVideo AnalysisObject DetectionMachine LearningDeep LearningG…

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

文章目录 前言第一步&#xff0c;官网下载安装包第二步&#xff0c;解压安装包第三步&#xff0c;安装编译环境第四步&#xff0c;编译源码第五步&#xff0c;安装git第六步&#xff0c;配置环境变量 前言 服务器版本&#xff1a;CentOS7.8 git官网&#xff1a;https://git-sc…

汽车出租系统【纯控制台】(Java课设)

系统类型 纯控制台类型&#xff08;没有用到数据库&#xff09; 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Idea或eclipse 运行效果 本系统源码地址&#xff1a;https://download.csdn.net/download/qq_50954361/87753364 更多系统…

Qt5.14.2安装教程

之所以选择安装Qt5.14.2&#xff0c;是因为从5.15.0起&#xff0c;对于开源用户&#xff0c;Qt官方不再提供独立安装文件&#xff0c;源码安装听说很繁琐&#xff0c;并且还要激活码。 官网下载链接&#xff1a;https://download.qt.io/archive/qt/5.14/5.14.2/ 1、Windows用户…

智能优化算法:基于驾驶训练的优化算法-附代码

智能优化算法&#xff1a;基于驾驶训练的优化算法 文章目录 智能优化算法&#xff1a;基于驾驶训练的优化算法1. 基于驾驶训练优化算法1.1 初始化1.2 阶段一&#xff1a;驾驶教练培训&#xff08;探索阶段&#xff09;1.3 阶段二&#xff1a;学员学习&#xff08;探索阶段&…

Jupyter notebook 如何设定默认的保存目录?

前言&#xff1a; 做智能车的时候&#xff0c;Jupter Notebook的默认保存在可怜的C盘&#xff0c;本来就很紧张的C肯定受不了&#xff0c;要改到别的地方&#xff0c;网上找了一些参考&#xff0c;说变更一下配置地址就可以了&#xff0c;照着做&#xff0c;99%的博客说&#x…

Linux驱动开发笔记(一):helloworld驱动源码编写、makefile编写以及驱动编译基本流程

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/130534343 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

算法和算法竞赛的知识点

2023年5月7日&#xff0c;周日早上&#xff1a; 虽然今天早上我作出了改变学习算法方式的决定&#xff0c;但是知识点有哪些、具体该怎么做还没搞清楚&#xff0c;于是去刷题网站截图了它们的标签。 或许看相关书籍的知识点和题单也不错。 LeetCode的知识点 力扣 蓝桥杯的知识…

2023招商Fintech数据赛道rank33 赛后分享

赛题需求&#xff1a; 本次比赛为参赛选手提供了两个数据集&#xff0c;即训练数据集(train)和测试数据集(test_A榜/test_B榜)。参赛选手需要基于训练数据集&#xff0c;通过有效的特征提取&#xff0c;构建客户进取类产品配置发生时点预测模型,并将模型应用于测试数据集上,输出…

力扣sql中等篇练习(十六)

力扣sql中等篇练习(十六) 1 不同性别每日分数统计 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 # 分数是往后累加的 SELECT s2.gender,s2.day,sum(s1.score_points) total FROM Scores s1 CROSS JOIN Scores s2 ON s2.gen…

java创建多线程的方法

Java中是可以创建多个线程的&#xff0c;每个线程都有自己的名字和时间戳。下面我们来看看创建多个线程的方法。 创建多个线程&#xff0c;需要使用到 Thread类中的 create方法。需要注意的是&#xff0c;不是所有的线程都可以使用 create方法来创建&#xff0c;只有当这些线程…

目前可用的ChatGPT网站

本文意在整理可用gpt-3.5、gpt-4.0等网站。 本文主要是方便自己翻阅&#xff0c;如对您也有所帮助&#xff0c;不胜荣幸~ 文章目录 chatgpt.qdymys.cngpttalkchatgpt-cn.cobing.com总结 chatgpt.qdymys.cn 网址&#xff1a;https://chatgpt.qdymys.cn/限制&#xff1a;三小时只…

【新星计划-2023】TCP/IP协议讲解

相信大家在学习的过程中一定听到过TCP/IP这个协议&#xff0c;那么&#xff0c;TCP/IP协议是什么&#xff1f;为什么会有TCP/IP协议&#xff1f; 一、TCP/IP是什么&#xff1f; TCP/IP是用于计算机通信的一组协议&#xff0c;我们通常称它为TCP/IP协议族。它是70年代中期美国…

Spring Boot项目瘦身

目录 1&#xff0c;什么是瘦身&#xff1f;2&#xff0c;为什么要瘦身&#xff1f;3&#xff0c;如何瘦身&#xff1f;3.1&#xff0c;瘦身思路&#xff1a;3.2&#xff0c;瘦身方法 4&#xff0c;瘦身后运行 1&#xff0c;什么是瘦身&#xff1f; 瘦身&#xff1a;thinBody&a…

CSS进阶

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

Spring AOP续--织入

上篇讲到SpringAOP的一些用法以及概念&#xff0c;这里我们单独讲一下AOP中的“织入”。 我们知道&#xff0c;SpringAOP是基于动态代理实现的技术&#xff0c;而织入则是一个生成动态代理对象并且将切面和目标对象方法编织成为约定流程的过程。 对于通知&#xff0c;上篇文章…

数字化转型导师坚鹏:如何制定与实施企业数字化转型年度培训规划

如何制定与实施企业数字化转型年度培训规划 ——以推动企业数字化转型战略落地为核心&#xff0c;实现知行果合一 课程背景&#xff1a; 很多企业都在开展企业数字化转型培训工作&#xff0c;目前存在以下问题急需解决&#xff1a; 缺少针对性的企业数字化转型年度培训规划…

Python每日一练(20230507) 丑数I\II\III、超级丑数

目录 1. 丑数 Ugly Number I 2. 丑数 Ugly Number II 3. 丑数 Ugly Number III 4. 超级丑数 Super Ugly Number &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 丑数 Ugly Number I …