我们来学习一下用VS Code，写一个通过字母按键变背景。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 400px;
height: 400px;
margin: 100px auto 0;
}
.wrap h1 {
text-align: center;
}
.wrap div {
width: 400px;
height: 300px;
background: pink;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>按键改变颜色</h1>
<div id="bgChange">
keyCode为：
<span id="keyCodeSpan"></span>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(document).keydown(function(e){
console.log(e.keyCode);
switch(e.keyCode){
case 65:
$("#bgChange").css("backgroundColor","red");
$("#keyCodeSpan").text("65");
break;
case 66:
$("#bgChange").css("backgroundColor","purple");
$("#keyCodeSpan").text("66");
break;
case 67:
$("#bgChange").css("backgroundColor","bule");
$("#keyCodeSpan").text("67");
break;
case 68:
$("#bgChange").css("backgroundColor","orange");
$("#keyCodeSpan").text("68");
break;
case 69:
$("#bgChange").css("backgroundColor","yellow");
$("#keyCodeSpan").text("69");
break;
case 70:
$("#bgChange").css("backgroundColor","green");
$("#keyCodeSpan").text("70");
break;
}
})
})
</script>
</body>
</html>
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
