Question

我对Javascript完全不熟悉，并试图在调用某个特定函数时抓住和的句柄。

我的项目在概念上很简单：

我希望能够在按下特定键的同时显示图像和音频。例如，如果按“ c ”，则会立即在屏幕上显示“汽车”和“鸣喇叭”声音的图像（和消失在onkeyup上。）

谢谢。

Answer 1

警告：我不擅长JavaScript编程，在这个例子中可能有很多非最佳实践。但是，这是我能够生成的最小的例子，它可以完成您指定的内容并希望能够说明基本概念。请注意，您需要将其放在同时包含汽车图片（“car.jpg”）以及“honk.mp3”音效的目录中（我使用this free sound）。

基本说明：文档正文注册了键入和键入事件，并设置了一个空白区域供以后绘制（“image-canvas”div标签）。当按下某个键时，如果它是字母'c'，则JS代码动态地用图片画布占位符标签的内容替换引用该图片的img标签和引用声音效果的音频标签。释放'c'键后，图像画布的内容将被删除。

同样，可能有更好，更快，更便携的方法来实现这一点（可能需要更多代码）。但这是一个简单的例子。

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
function keyDown(event) {
  if (event.keyCode == 67) {
    var canvas = document.getElementById('image-canvas');
    canvas.innerHTML = '<img src="car.jpg" />'
    canvas.innerHTML += '<audio src="honk.mp3" autoplay="autoplay">'
  }
}
function keyUp(event) {
  if (event.keyCode == 67) {
    var canvas = document.getElementById('image-canvas');
    canvas.innerHTML = '';
  }
}
</script>
</head>

<body onkeydown="keyDown(event)" onkeyup="keyUp(event)">
<h1>Car!</h1>
<div id="image-canvas"></div>
</body>

</html>

带声音和图像的Javascript OnKeyDown

1 个答案: