本帖最后由 x_4_28 于 2012-08-03 10:47:53 编辑

解决方案 »

  1.   

    <script type="text/javascript" src="./jquery-1.7.1.js"></script>
    <script type="text/javascript">
    var bRecord = false;
    var arrNum = [];
    var arrNumLength=0;
    function init() {
    bRecord=true;
    arrNumLength=1;
    arrNum = [];
    $('#info').val(''); $('ul.row li').removeClass('light');
    }function setSelect(obj) {
    $(obj).addClass('light'); arrNum[arrNum.length] = $(obj).attr('num');
    $('#info').val(arrNum.join()); arrNumLength++;
    }$(document).ready(function(){ $('ul.frm').mousedown(function(){
    if(bRecord==false){
    init();
    }
    });
    $('ul.frm').mouseup(function(){
    init()
    bRecord=false;
    }); $('ul.frm li ul.row li').mousedown(function(){
    if(bRecord == false)
    {
    init();
    setSelect(this);
    }
    });
    $('ul.frm li ul.row li').mouseover(function(){
    if(bRecord == false)
    return;

    var i=0;
    for(i; i<arrNum.length; i++) {
    if (arrNum[i] == $(this).attr('num')) {
    return;
    }
    } if(arrNumLength>7){
    init();
    bRecord = false;
    return;
    }

    setSelect(this); if (arrNumLength > 7) {
    if ($('#info').val() == $('#pass').val()) {
    alert("OK");
    }
    init();
    return;
    }
    });

    });
    </script>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Nine Lock</title>
    <style type="text/css">
    .clearfix:after {content:'.';display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
    .clearfix {display: inline-block;}
    ul.frm {list-style-type:none;margin:0px;padding:0px;}
    ul.frm li {margin:10px 0px;padding:0px;}
    ul.row {list-style-type:none;margin:0px;padding:0px;}
    ul.row li {margin:0px 10px;padding:0px;width:32px;height:32px;float:left;background-color:#CCC;}
    ul.row li.light {background-color:#008000;}
    </style>
    </head>
    <body>
    <input type="hidden" id="pass" value="1,2,3,6,5,4,7" />
    <input type="hidden" id="info" />
    <div>
    <ul class="frm">
            <li><ul class="row clearfix">
                    <li num="1"></li>
                    <li num="2"></li>
                    <li num="3"></li>
            </ul></li>
            <li><ul class="row clearfix">
                    <li num="4"></li>
                    <li num="5"></li>
                    <li num="6"></li>
            </ul></li>
            <li><ul class="row clearfix">
                    <li num="7"></li>
                    <li num="8"></li>
                    <li num="9"></li>
            </ul></li>
    </ul>
    </div></body>
    </html>