辨识颜色（HTML版）

来源：互联网发布：竖琴踏板知乎编辑：程序博客网时间：2024/05/01 20:54

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