- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我开发了一个小型项目,当我单击鼠标时,每次单击屏幕都会填充许多圆圈。我正在尝试做同样的事情,但是,不同之处在于按下空格键时它会做同样的事情。
由于某种原因,我的代码无法工作,我什至在控制台日志记录中也看不到任何内容,我不明白为什么。一些指导将不胜感激。
这是我的 html:
<!DOCTYPE html>
<html>
<head>
<title>CircleMaker</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="ball"></div>
</body>
<script src="mainn.js"></script>
</html>
CSS
html{
box-sizing: border-box;
}
*, *::before, *::after{
box-sizing: inherit;
}
#ball{
width: 200px;
height: 200px;
top: 200px;
left: 200px;
background-color: red;
border-radius: 100px;
}
Javascript
var circle = document.getElementById('ball');
circle.addEventListener('keydown', circleMultiplier);
function circleMultiplier(e){
e.preventDefault();
console.log(e.keyCode);
if (e.key === 32){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
var posx = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var posy = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var newDiv = document.createElement('div');
newDiv.style.cssText = 'top:'+posx+'px; left:'+posy+'px; position:absolute; width: 200px; height: 200px;background-color:' +color+ '; border-radius: 100px;';
document.body.appendChild(newDiv);
}
}
当我点击空格键时,它应该如下图所示填充:
当我单击鼠标时,此代码有效:
var circle = document.getElementById('ball');
circle.addEventListener('click', circleMultiplier);
function circleMultiplier(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
var posx = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var posy = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var newDiv = document.createElement('div');
newDiv.style.cssText = 'top:'+posx+'px; left:'+posy+'px; position:absolute; width: 200px; height: 200px;background-color:' +color+ '; border-radius: 100px;';
document.body.appendChild(newDiv);
}
最佳答案
您无法监听 div 上的键盘事件。点击发生在 div 本身上,因此它执行相应的回调函数。
对于您的用例,将监听器附加到文档本身更有意义。例如。
document.addEventListener('keyup', function(e){console.log(e.keyCode)});
关于javascript - 空格键的 keydown 事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51526892/
我在tinyMCE中遇到了一个奇怪的问题,即我无法在完整框架之外进行复制。整个问题仅在FireFox中运行,因为它仅支持FF,因此问题仅限于FF。 我使用AJAX调用来动态加载tinyMCE的一个或多
我的 JS 在这里: $('input[type=submit]').click(function () { var val = $('#message_content').scedito
我需要一些关于如何解决我的问题的想法。我有以下带有表格的 html 模板。它显示 5 行,在每行的末尾(在最后一个 td 中)有一个按钮触发 Bootstrap 模式(弹出窗口)。我正在使用空格键 {
我有以下代码: ...... 如何在空格键模板的 if 条件中使用 AND/OR ? 最佳答案 空格键无法处理逻辑表达式,因此您需要创建一个帮助程序来处理计算。 其实你可以实现and具有嵌套 if
我正在用 JavaScript 编写代码,目标是 Chrome。 现在,考虑以下情况: 我在网页上按空格/退格键 vs 我在文本框上按空格键/退格键 通过使用 (goog.events.listen
我在实现 RoutedUICommand 的 RoutedCommand 类中处理命令。如果需要,这将帮助我通过检查他们的 CanExecute 和 Execute 来阻止或覆盖命令。我可以覆盖 Ed
基本上,我想制作一个计算 10 秒内空格键按下/按钮点击次数的游戏。我制作了一个倒数计时器,两个计数器都工作正常 我找不到停止按键计数的方法(在计时器停止后),所以我使用了“禁用”按钮,但如果有更好的
我遇到了一个问题,selenium 无法按住不在此列表中的键 - Keys.SHIFT, Keys.CONTROL, Keys.ALT, Keys.META, Keys.COMMAND, Keys.L
我有一个集合,其值类似于 { "pctFail": "0.3515500159795462"} ,当我将其传递给模板并显示为 {{myTemplate}}% 时,它在我的 html 中显示为0.351
{{#each}} 中 {{#if}} 的这个简单示例产生了意想不到的(对我而言)结果: HTML: test {{> test yes=true}} template nam
我使用下面的代码创建一个带有对话的 MessageBox。默认情况下,yes 按钮具有焦点。如果我不小心按了空格键,对话框就会明白我选择了是。我只希望按下回车键触发事件。有没有办法禁止 Space 键
我愿意根据 Session 变量设置我的应用程序的 header 。 这是空格键模板: {{#if session 'header'}} {{#if session 'header_le
我的问题: ^space & c:: send {F2} send {Escape} 但它没有用,我如何模拟 Ctrl+Space + AlphabeticaklKey ? 最佳答案 正如我之前的演讲
我正在 Visual Studio 2008 中开发 MFC 应用程序。我有一个带有复选框的 CListCtrl 对象。我想知道是否有一种简单的方法可以让空格键切换所有突出显示的项目。现在,在按下空格
我有一个本地全屏 AIR 应用程序(从服务器加载多个 SWF),我正在尝试使用 ALT+作为捷径。 但 Windows 操作系统拦截了 ALT键,例如当我按下 ALT+Space 时显示左上角窗口菜单
我刚刚开始使用 Eclipse,我注意到当我开始输入本地变量名称时,它不会像 Visual Studio 那样提供建议,直到我按 Ctrl+Space 。有什么办法让它自动执行此操作吗?我发现 Ctr
Enter keyCode(13) 在所有浏览器上都能正常工作。 空格键 keyCode(32) 我在 Chrome 上测试工作正常但在 Firefox 上没有响应。我使用了以下代码: fu
我有一个 jQuery UI 对话框,其中有足够的内容来触发垂直滚动条的出现。我发现使其滚动的唯一方法是单击并拖动滚动条,或单击滚动条区域 - 即无法使用 PgUp 或 PgDn 键、箭头键或空格键使
当我使用 HTML5 contenteditable 时,空格键在 button 元素中不起作用。但它在 div 元素中运行完美。我怎样才能让它工作?有人可以帮助我吗? 请在这里查看:https://
我是一名优秀的程序员,十分优秀!