0410---第四次jQuery作业---键盘换色

最新推荐文章于 2020-08-22 20:22:07 发布

酷扬

最新推荐文章于 2020-08-22 20:22:07 发布

阅读量231

点赞数

分类专栏： html html css css html javascript jquery 文章标签： css html javascript jquery

本文链接：https://blog.csdn.net/aa8869138/article/details/69950477

版权

html 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

html css

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
body{
width: 100%;
height: 100%;
}
.all{
width: 300px;
height: 200px;
/* margin: 100px auto;*/
border:1px solid red;
}
span{
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="all">
<span></span>
</div>

<script type="text/javascript">
$(function(){
var i=0;
$("body").on({
keydown:function(event){
$("span").html("keyCode为:"+event.keyCode);
if(event.keyCode>=89){
$(".all").css("background-color","yellow");
}
else if(event.keyCode>=66&&event.keyCode<=79){
$(".all").css("background-color","blue");
}
else if(event.keyCode>79&&event.keyCode<=82){
$(".all").css("background-color","green");
}
else if(event.keyCode>82&&event.keyCode<89){
$(".all").css("background-color","red");
}
else{
alert("系统没有设置该颜色");
$(".all").css("background-color","");
}
},
click:function(){
if(i==0){
$("body").append("<div class='down'></div>");
$(".down").append("<button>消除痕迹</button>");

i=1;
}else{

$(".down").append("<p>来来来</p>");
}
}
});
$("body").delegate("button","click",function(){
i=0;
$(".down").remove("");
});
});
</script>
</body>
</html>