您的位置：首页 > Web前端 > HTML

辨识颜色（HTML版）

2016-03-04 16:10 429 查看

辨识颜色小游戏，页面中有25个色块，其中只有一个色块是不同于其他24个色块的，请找出是哪一个。

<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.ele").bind("click",function(){
var ans=($(this).css("backgroundColor"));
if(ans.indexOf("255")==-1){
$("#msg").html("You win");
$("#msg").css("backgroundColor","#00ff00");
}else{
$("#msg").html("You fail");
$("#msg").css("backgroundColor","#ff0000");
}
});
var num=parseInt(Math.random()*25);
$("div.ele").each(function(i,e){
if(i==num){
$(this).css("backgroundColor","#fa0000");
}
});

})
</script>
<style type="text/css">
div{
border-radius:4px;
}
.ele{
width:50px;
height:50px;
background-color:#ff0000;
float:left;
margin-right:1px;
}
.msg{
width:255px;height:50px;margin:10px auto;color:white;font-size:30px;
text-align:center;vertical-align:center;
}
</style>
</head>
<body>
<div style="width:255px;height:260px;margin:10px auto;">
<div class="outer" style="float:left;">
<div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div>
</div>
<div class="outer" style="margin-top:1px;float:left;">
<div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div>
</div>
<div class="outer" style="margin-top:1px;float:left;">
<div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div>
</div>
<div class="outer" style="margin-top:1px;float:left;">
<div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div>
</div>
<div class="outer" style="margin-top:1px;float:left;">
<div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div><div class="ele"></div>
</div>
</div>
<div class="msg" id="msg"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航