我如何做到这一点，当用户按下某个键时，形状的某些属性会发生变化。例如，当用户在键盘上按下“ a”时，如何使屏幕上的形状改变颜色。我尝试编辑鼠标悬停事件以适合我希望它响应的按键输入。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Page Title</title> <link rel="stylesheet" href="css/screen.css"><style>.box1{ background:#1E90FF; width: 1000px; height:100px; float:right; margin: 0px 0px 0px 0px;}.circle { height: 200px; width: 200px; background-color: #1E90FF; border-radius: 50%;}.toprectangle { height: 80px; width: 200px; background-color: #1E90FF; float:right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; }.square { height: 80px; width: 200px; background-color: #1E90FF; float:right; margin: 10px 40px 10px 1000px; border: 1px solid #1E90FF; <!--Third square down-->}.box2{ background:#1E90FF; width: 1400px; height:100px; float:right; margin: 60px 0px 0px 0px; <!--rectangle at the bottom--> }.box3{ background:#1E90FF; width: 200px; height:600px; margin: 0px 20px 130px 0px; <!--rectangle going up the side-->}.circle1{ height: 200px; width: 200px; background-color: #1E90FF; border-radius: 50%; margin: 10px 500px 0px;}</style></head><body><script> function onkeypress(evt); if(onkeypress == 49): .toprectangle { height: 80px; width: 200px; background-color: #ff78ff; float:right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; }</script> <div class="box1"></div> </div> <div class="circle"></div> <div class="circle1"></div> <div class="toprectangle"></div> <div class="square"></div> <div class="square"></div> <div class="box3"></div> <div class="box2"></div><svg width="500" height="150"> </body></html>我希望不同的形状会改变颜色，具体取决于用户按下的键，但是此刻的代码无法响应任何输入。
2 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
好的，所以您的代码中有些错误...首先，您的JS（JavaScript）错误，语法
错误的方法
function onkeypress(evt);
if(onkeypress == 49)
正确的方法
function onkeypress(evt) {
if ( /* your condition */ ) {
/* your code */
}
}
另外，您需要在函数中添加一个侦听器，该侦听器将侦听某个事件并调用一个函数（您的回调），您可以在此处阅读更多内容。要使用它就像：
document.addEventListener("keypress", onkeypress); // Add the listener
function onkeypress(e) {
/* Will handler your callback */
}
或者
document.addEventListener("keypress", (e) => {
/* Will handler your callback */
})
而且第二个snnipet中的CSS是错误的，您必须在<style></style>标记内使用它。并且您的<script></script>标签必须在正文的末尾，才能正常工作。尝试下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" href="css/screen.css">
<style>
.toprectangle {
height: 80px;
width: 200px;
background-color: #1E90FF;
float:right;
margin: 0px 40px 20px 80px;
border: 1px solid #1E90FF;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="circle"></div>
<div class="circle1"></div>
<div class="toprectangle"></div>
<div class="square"></div>
<div class="square"></div>
<div class="box3"></div>
<div class="box2"></div>
<script>
document.addEventListener("keypress", onkeypress);
function onkeypress(e) {
console.log(`Letter: ${e.key} with code ${e.keyCode}`);
if (e.keyCode == 97) {
console.log('Letter `a` has been pressd!');
let toprectangle = document.getElementsByClassName("toprectangle");
console.log(toprectangle)
toprectangle[0].style.backgroundColor = "#000"
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消