辨识颜色（HTML版）

最新推荐文章于 2022-07-26 23:51:49 发布

鹤立鸭群

最新推荐文章于 2022-07-26 23:51:49 发布

阅读量778

点赞数

分类专栏： JavaScript Html 文章标签： javascript 游戏

本文链接：https://blog.csdn.net/csndmi/article/details/50803475

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Html

5 篇文章 0 订阅

订阅专栏

辨识颜色小游戏，页面中有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>

鹤立鸭群

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
辨识颜色（HTML版）

辨识颜色小游戏，页面中有25个色块，其中只有一个色块是不同于其他24个色块的，请找出是哪一个。Google Map $(function(){ $("div.ele").bind("click",function(){ var ans=($(this).css("backgroundColor")); if(ans.indexOf("255")==-1){
复制链接

扫一扫