当一张图片经过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>
如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!