Question

我正在为学校项目制作一个迷你游戏，我需要这段代码的帮助。我想要：

通过按键盘上的键，带图像的div将放大到300px宽度和高度的最大尺寸。

30秒后，如果未达到尺寸，则提供用户反馈以重试。

我尝试的所有内容都不起作用，我不熟悉JavaScript。

这是我的代码：

    document.onkeydown = function(evt) {
  evt = evt || window.event;
  if (evt.keyCode == 71) {
        var box = document.getElementById("water2");
            box.style.width="200px";
            box.style.height= "300px";
  } else if (evt.keyCode == 191) {
        var box = document.getElementById("water1");
            box.style.width="200px";
            box.style.height= "300px";
  }
};

我的HTML：

<div id="wrapper">
<div id="water1"></div>
<div id="water2"></div>
<div id="water3"></div>
<div id="water4"></div>
<div id="water5"></div>
</div>

我的CSS

#wrapper {
    position: relative;
    background: black;
    border: aqua 1px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    height: auto;

}



#water1{
    height: 1px;
    width: 3px;
    border: black;  
    float: left;
    background:url(img/animated-water-moving-blue-flowing.gif);
    float: right;

}
#water2{
    float: left;
    height: 1px;
    width: 3px;
    border: black;  
    background:url(img/animated-water-moving-blue-flowing.gif);

}

Answer 1

您面临的问题非常简单：事件未被正确捕获，因为上层似乎阻止了它。

以下命令可确保文档捕获您的活动。

document.captureEvents(Event.KEYDOWN);

最好让您了解本网站的全球活动： http://javascript.about.com/library/bltut33.htm 顺便说一句：我认为你所说的事件是document.onkeyup或document.onkeypress，因为它只做了一次反应。

之后，您的代码需要进行紧急修改：

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 191) {
    var box = document.getElementById("water1");
    box.style.width="200";
    box.style.height= "300";
}
 };

将被此函数覆盖：

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 71) {
    var box = document.getElementById("water2");
    box.style.width="200";
    box.style.height= "300";
}
 };

所以合并它们：

document.onkeydown = function(evt) {
  evt = evt || window.event;
  if (evt.keyCode == 71) {
    var box = document.getElementById("water2");
    box.style.width="200";
    box.style.height= "300";
  } else if (evt.keyCode == 191) {
    var box = document.getElementById("water1");
    box.style.width="200";
    box.style.height= "300";
  }
};

要在几秒钟后启动一个函数，请使用setTimeout： http://www.w3schools.com/jsref/met_win_settimeout.asp

要轻松阅读和设置html-objects的属性，请熟悉JQuery： http://jquery.com/

享受学校项目的乐趣！

Javascript键按下以使div更大

1 个答案: