js中对键盘的监听事件,触发这个监听时还会发出相应的音效

当一张图片经过x轴上的一个分界线,同时点击键盘上的a键,可以发出对应声音,并且这张图片0.5s后消失。这样的效果应该怎么写呢?

是对a键进行监听,然后用if条件写吗

你题目的解答代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
#pic {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 2;
}
#xian {
    position: absolute;
    top: 0px;
    left: 200px;
    width: 3px;
    height: 100px;
    background-color: #999;
}
</style>
</head>
<body>

<img src="2.png" id="pic" width="20" height="50" alt="" />
<div id="xian"></div>

<script type="text/javascript">
var pic = document.getElementById("pic");
var au = document.createElement("audio");
au.src = "http://pic.isheji688.com/ppt/127958/5e9a970756699.mp3";
var timer = setInterval(function(){
    pic.style.left = ((pic.offsetLeft+10)%500)+"px";
    
}, 50);;
document.onkeydown=function(e){
    e = (e||event);
    if(e.keyCode==65){//65是A键的编码
        if (pic.offsetLeft>=183 && pic.offsetLeft<=200) {
            au.play();
            clearInterval(timer);
            setTimeout(function(){
                pic.style.display = "none";
            }, 500);
        }
    }
}

</script>
</body>
</html>

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img