Web page color-resolved test small game JS identification and optimization

I believe that we have played a kind of web games, the popular can be called Color discrimination test Game (the name is right I do not know, do not care about these details), that is, the following this thing, a look on it; carefully played for a period of time, as a 100 meters away from the male and female amblyopia young people, often can not pass a few , to this end I am also unusually silent, all blame the original study too Hard (hehe), want to challenge click here

The process of the game is that the page will appear a different color lattice, that is, Div, click on the color of the only lattice even if the clearance, and then more lattice (max does not change more), the color becomes similar, the difficulty becomes larger, until the wrong point or the countdown end, very simple appearance, As the front-end personnel do not hesitate to F12, as follows:

This is the structure, #box中一串span, which has a span of the style:background is the only, click on the only OK, so I would like to use a script instead of my own click, no way of vision can not ah, but also want to labor, so direct code is as follows:

//take to all background
var stylelist = new Array ();
$ ("#box span"). each (function() {     for(vari = 0; I < $ ("#box span"). Length; i++) {Stylelist[i]= $( This). attr ("style"); }});//Split Arrayvars = Stylelist.join (",") + ",", copy; for(vari = 0; i < stylelist.length; i++) {    //Remove unique style    if(S.replace (Stylelist[i] + ",", ""). IndexOf (Stylelist[i] + ",") >-1) {Copy=Stylelist[i]; }}//it doesn't explain.$ ("#box span"). each (function() {    if($( This). attr ("style")! =copy) $ ( This). Click (); return;});

Then the above code can be replaced by manual click, it is convenient to have wood, the following is the results of my measured operation: (if there is a pure hand point of record more than I this, please accept my knees)

168 off, you do not read wrong, is 168, a minute time through 168, and the middle of the browser reaction slow time, so the real should be higher than this (start a little understanding of the game plug-in Ah hello), but this code is too coarse (span can be seconds), the efficiency is very low, this will continue to say;

If someone asks, "Bridge bean Sack ~ How do you run the browser running?" This means that you rarely use the browser debugging Ah, the method is as follows:

Simple rough directly run on the line, of course, this is not the optimal choice, because each time to the new level (new page) to manually go to run, also really tired hand (return a face injustice), you can consider the package into a browser plug-in, the page has been automatically run, worry-saving ~ ~

Then the efficiency of the above, to optimize the code, the reason that this code is rough, because it is traversing all spans, here is not much so almost seconds, if it is a lot of span or performance requirements of the extreme manufacturers, this code is not pass, The optimization of the scheme is to traverse all the style of the span, the first encounter the unique style on the operation, such as there are 10,000 grid, the tenth is a different lattice, so long as the traverse to the end of here, instead of traversing 10000, otherwise the browser June said can't carry Ah ... Words do not say more than the code is as follows:

varStylelist =NewArray (), copy; $ ("#box span"). each (function() {     for(vari = 0; I < $ ("#box span"). Length; i++) {Stylelist[i]= $( This). attr ("style"); //The initial number of squares is greater than 2         for(varj=0;j<stylelist.length;j++){            if(Stylelist.tostring (). replace (Stylelist[j], ""). IndexOf (Stylelist[j]) >-1) {Copy=Stylelist[j]; }            return; }    }});
I don't know if I can optimize it here, mark. $ ("#box span"). each (function() {    if($( This). attr ("style")! =copy) $ ( This). Click (); return;});

Well, in fact, easy to see, but easy to achieve, the best difficult, the ultimate optimization requirements for the writer is a complete test, after all, writing is the experience accumulated ah, today before the code here, the text if there are flaws or better ways to welcome the small partners to point out.

Web page color-resolved test small game JS identification and optimization