|
argin-top: 60px;
color: red;
}
</style>
</head>
<body>
<h2>请选择背景颜色</h2>
<div>
<div id="blue" class="div1">蓝色</div>
<div id="green" class="div1">绿色</div>
</div>
<div class="div2" id="bg"></div>
<div>
输入颜色首字母： <input type="text" name="color">
</div>
<script type="text/java script" src="js/jquery-3.4.1.js"></script>
<script type="text/java script">
alert("欢迎来到设置颜色的页面");
$("#blue").click(function(){
$("#bg").css("background-color", "blue");
$("#bg").text("蓝色背景");
});
$("#green").click(function(){
$("#bg").css({"background-color":"green","font-weight":"bold"});
$("#bg").text("绿色背景");
});
$("input[type='text']").keypress(function(event){
if(event.keyCode == 66){
$("#bg").css("background-color", "blue");
$("#bg").text("");
}
if(event.keyCode == 71){
$("#bg").css("background-color","green");
$("#bg").text("");
}
});
</script>
</body>
</html>
|