html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>色盲游戏</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="JiChuShiJian.js"></script> <link href="JiChuShiJian.css" rel="stylesheet" type="text/css"/> </head> <body> <center> <h1>检测色盲小游戏，只有把颜色全部拼成一样才可以取得胜利哦！！！刚把得。。。</h1> <hr> <div id="box" style=" 660px;height: 660px;background: black"> <div class="divone red" style=" 200px;height:200px; margin: 10px;float:left;"></div> <div class="divtwo green" style=" 200px;height:200px; margin: 10px;float:left;"></div> <div class="divthree blue" style=" 200px;height:200px; margin: 10px; float:left;"></div> <div class="divfour gainsboro" style=" 200px;height:200px; margin: 10px; float:left;"></div> <div class="divfive pink" style=" 200px;height:200px; margin: 10px; float:left;"></div> <div class="divsix cornflowerblue" style=" 200px;height:200px; margin: 10px;float:left;"></div> <div class="divseven blueviolet" style=" 200px;height:200px; margin: 10px;float:left;"></div> <div class="diveight greenyellow" style=" 200px;height:200px; margin: 10px;float:left;"></div> <div class="divnine plum" style=" 200px;height:200px; margin: 10px;float:left;"></div> </div> <hr> <button class="but" style=" 100px;height: 60px;background: limegreen">验证一下</button> </center> </body> </html>
css
/*定义的9种颜色*/
.red{
background:red;
}
.green{
background: green;
}
.blue{
background: blue;
}
.gainsboro{
background: gainsboro;
}
.pink{
background:deeppink;
}
.cornflowerblue{
background: cornflowerblue;
}
.blueviolet{
background: blueviolet;
}
.greenyellow{
background:greenyellow;
}
.plum{
background: plum;
}
/*标题背景色*/
h1{
background: lightskyblue;
}
js
$(function () {
//为每一个div设置单击事件
//var flag=1;
$('.divone').bind('click',fn);//fn如果直接加上括号 即fn() 就相当于直接调用 刷新页面还没有单击就会执行fn里边的过程
$('.divtwo').bind('click',fn);
$('.divthree').bind('click',fn);
$('.divfour').bind('click',fn);
$('.divfive').bind('click',fn);
$('.divsix').bind('click',fn);
$('.divseven').bind('click',fn);
$('.diveight').bind('click',fn);
$('.divnine').bind('click',fn);
//为but验证按钮添加一个单机事件的监听 监听用户点击的时候验证所有的颜色是否一致
$('.but').bind('click',checkcolor);
function fn(){//这个函数完成的功能：实现单机div div颜色改变 class属性值变更为 divXXX color 的形式
////这里边先判断出 点击的是哪一个div 然后设置flag的值
//alert($('.divone')[0].nodeName);
//虽然每次 class的值都在改变 但是在获取的时候只能通过最初设置的class为准 前提是在下面不能使用removeClass()
//removeClass('XXX')只能这样使用 这样能够保证在调试窗口中class动态变化 但是最初设置的class属性并不会被清除 [divone red , divone green ]
// 而且通过class获取的时候也是根据最初设置的值来获取的
//获取当前div的class全部名称 然后使用正则表达式进行拆分 解析出class中空格后的颜色内容的内容
//alert($(this)[0].nodeName);
//alert($(this).attr('class'));//这里已经能够正确打印出每次单击时 产生的class属性值divone red, divtwo green
var classstring=$(this).attr('class');
//alert(classstring);
//接下来就要使用正则表达式进行拆分
var pattern=/s([a-z]+)/;
var result=pattern.exec(classstring);//取得divXXX后的颜色值 red green 不要忘记这里的字符串是带着空格的
var removekongge=RegExp.$1;//使用的分组 所以$1就是第一个分组中返回的数据 这样就了去除空格；
//alert(typeof removekongge);
/*
//下面进行逐个判断 然后动态设置flag的值 让颜色的变化按照一定顺序进行 即对应颜色div在变化的时候直接从css样式表中对应颜色的下一个颜色开始
if(removekongge=="red"){
flag=1;
}else if(removekongge=="green"){
flag=2;
} else if(removekongge=="blue"){
flag=3;
}else if(removekongge=="gainsboro"){
flag=4;
}else if(removekongge=="pink"){
flag=5;
}else if(removekongge=="cornflowerblue"){
flag=6;
}else if(removekongge=="blueviolet"){
flag=7;
}else if(removekongge=="greenyellow"){
flag=8;
}else if(removekongge=="plum"){
flag=9;
}
if(flag==1){
$(this).removeClass('red').addClass('green');
flag=2;
}else if(flag==2){
$(this).removeClass('green').addClass('blue');
flag=3;
}else if(flag==3){
$(this).removeClass('blue').addClass('gainsboro');
flag=4;
}else if(flag==4){
$(this).removeClass('gainsboro').addClass('pink');
flag=5;
}else if(flag==5){
$(this).removeClass('pink').addClass('cornflowerblue');
flag=6;
}else if(flag==6){
$(this).removeClass('cornflowerblue').addClass('blueviolet');
flag=7;
}else if(flag==7){
$(this).removeClass('blueviolet').addClass('greenyellow');
flag=8;
}else if(flag==8){
$(this).removeClass('greenyellow').addClass('plum');
flag=9;
}else if(flag==9){
$(this).removeClass('plum').addClass('red');
flag=1;
}
*/
//简化写法
if(removekongge=="red"){
$(this).removeClass('red').addClass('green');
}else if(removekongge=="green"){
$(this).removeClass('green').addClass('blue');
} else if(removekongge=="blue"){
$(this).removeClass('blue').addClass('gainsboro');
}else if(removekongge=="gainsboro"){
$(this).removeClass('gainsboro').addClass('pink');
}else if(removekongge=="pink"){
$(this).removeClass('pink').addClass('cornflowerblue');
}else if(removekongge=="cornflowerblue"){
$(this).removeClass('cornflowerblue').addClass('blueviolet');
}else if(removekongge=="blueviolet"){
$(this).removeClass('blueviolet').addClass('greenyellow');
}else if(removekongge=="greenyellow"){
$(this).removeClass('greenyellow').addClass('plum');
}else if(removekongge=="plum"){
$(this).removeClass('plum').addClass('red');
}
}
function checkcolor(){//这个函数完成的功能就是：获取目前页面上所有div的class值 并且得到 divXXX color中的color值 比较他们的color是否一样 如果一样 则游戏过关
var divall=$('#box div');//获取了9个div颜色块
//下面进行遍历
var flag=null;
var result=true;
divall.each(function (index,element) {
//alert($(element).attr('class'));//可以打印出9个div的class属性值
//var str=$(element).attr('class');
var pattern=/s([a-z]+)/;//创建正则表达式 使用分组
//pattern.test($(element).attr('class'));//使用RegExp方法之前需要先执行以下test 或者exec方法
var removekongge=pattern.exec($(element).attr('class'))[1];//去除了空格 这里得到的就是 color数值
if(flag==null){
flag=removekongge;
//alert("第一次为空啊");
}else{
//如果不为空 那么就进行颜色的比较 如果不相等 就直接跳出返回false 说明颜色不一致 否则 判断到最后 返回true
//alert("判断吧");
if(flag!=removekongge){//不相等 返回false
result=false;
}
}
});
//遍历完毕 下面判断result的值
if(result){
alert("看来你不是色盲。。。");
}else{
alert("你是色盲啊，，，少年");
}
}
})