准备 一个div宽高500背景颜色黑色 按下w变为红色按下s变为黄色按下a变为蓝色按下d变为绿色
时间: 2024-02-09 18:09:51 浏览: 27
好的,这是一个基于 JavaScript 的解决方案,可以实现你的需求:
```html
<!DOCTYPE html>
<html>
<head>
<title>改变div颜色</title>
<style>
div {
width: 500px;
height: 500px;
background-color: black;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
document.addEventListener("keydown", function(event) {
if (event.key === "w") {
div.style.backgroundColor = "red";
} else if (event.key === "s") {
div.style.backgroundColor = "yellow";
} else if (event.key === "a") {
div.style.backgroundColor = "blue";
} else if (event.key === "d") {
div.style.backgroundColor = "green";
}
});
</script>
</body>
</html>
```
你可以复制这段代码到一个 HTML 文件中并在浏览器中打开,然后按下键盘上的 w、s、a、d 键测试一下。注意,当该页面处于焦点状态时才能够响应按键事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)