在本文中,使用 HTML 和 CSS 执行键盘检测。
HTML代表“超文本标记语言”。 HTML 语言帮助开发人员为 Web 应用程序创建和设计网页元素,如链接、部分、段落、标题和块引用。
CSS代表“层叠样式表”。级联样式表用于设计网页布局。样式定义为为表格、大小和文本提供样式。
JavaScript是一种用于客户端和服务器端的脚本编程语言,它使网页相互交谈和通信。
以上所有技术都用于实现按键检测。
可以使用 Atom或Sublime Text等程序编辑器应用程序来编译程序。
例子:
为以下代码创建一个index.html 文件。
对于上面的 HTML 代码,我们需要包含main.css和main.js
CSS 代码:以下代码写在main.css文件中。
body
{
font-family: monospace, arial;
font-size: 38px;
text-align: center;
}
JavaScript 代码:以下代码写在main.js文件中。
window.onload = function(){
var demo = document.getElementById('demo');
var value = 0;
var space_bar = 32;
var right_arrow = 39;
window.onkeydown= function(gfg){
if(gfg.keyCode === space_bar){
value++;
demo.innerHTML = value;
};
if(gfg.keyCode === right_arrow)
{
alert("Welcome to GeeksForGeeks!");
};
};
};
这里,
var space_bar = 32
和
var right_arrow = 39
实际上是与特定键对应的键码。每当单击空格键或向右箭头时,HTML 将检测单击类型并根据单击次数或消息进行响应。
输出:
-
单击空格键时会显示一个数字。
-
单击右箭头时,页面会响应一条消息。