1

我对 Javascript 完全陌生，并试图掌握如何以及何时调用特定函数。

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

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

谢谢你。

4

1 回答 1

0

警告：我不擅长 JavaScript 编程，在这个例子中可能有很多非最佳实践。但是，这是我可以生成的最小示例，它可以执行您指定的操作，并有望说明基本概念。请注意，您需要将它放在一个目录中，该目录也有汽车图片（“car.jpg”）以及“honk.mp3”音效（我使用了这个免费的声音）。

基本解释：文档主体注册key-down和key-up事件，并设置空白区域供以后绘制（“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>
于 2013-05-30T17:00:53.877 回答