2010年世界杯 模拟夺冠程序

 

继世界杯模拟抽签之后，公司又弄了个世界杯模拟晋级，在抽签真实结果的基础上，每组抽取两队，选出16强，16强中选出八强 。。。直至选出冠亚季军。

这个小程序 有两个步骤，第一步是选曲16强 第二步是晋级区 可详见 http://soccer.titan24.com/app/soccer/worldcupgame/index.php

 其中用到了几个小技巧~比如选完16强 直接将屏幕滚动到 晋级区 判断已选的个数 并用一下代码 做屏幕滚动：

if($("#res").find(".sld").length==16){

window.scrollTo(0,620);

}

在选后一级之前，可以重新选择前一级，而开始选择后一级时，前一级的选择结果则固定不能重选 使用remove方法 去掉不可选的菜单

在最后阶段的选择中， 自动分别冠亚季军等。最后将所有结果 存到一个 JS对象中 代码如下：

 // JavaScript Document by Trance

/*
*2010南非世界杯模拟晋级
*Mail:trance2005@163.com
*MSN:trancelover@live.cn
*QQ:397902738
*teamsel:晋级路上的球队 红色标志的球队
*top16:16强球队
*..........
*top3:冠亚季军
*Date:2009-12-01
*/
$(document).ready(function(){
    
    var res={
        teamsel:[], 
        top16:[], 
        top8:[],
        top4:[],
        top3:[]
        }
    
    $("#res").find("td").mouseover(function(){
        var dl=    $(this);
        if(!dl.hasClass("sld") && dl.find(".hide").length<2){
            var gx=parseInt(Math.floor(dl.offset().left))+66+"px";
            var gy=parseInt(Math.floor(dl.offset().top))-8+"px";
            var menu=dl.find("div");
            var group=menu.attr("class");
            var td=dl.find("strong").html();
            var tarid;
            menu.css({"top":gy,"left":gx}).show();
            menu.find("li").click(function(e){
                var li=    $(e.target).parents("li")||$(e.target);    
                if(!li.hasClass("hide")){
                    var grade=li.attr("class");
                    tarid=group+grade;
                    $("."+group).find("."+grade).addClass("hide");
                    dl.addClass("sld");
                    menu.hide();
                    //alert(tarid);
                    $("#"+tarid).html(td);
                    if($("#res").find(".sld").length==16){
                        window.scrollTo(0,620);
                        }
                    return false;
                    }
                return false;
                })
                return false;
            }
        
        return false;
        }).mouseout(function(){
            $(this).find("div").hide();
            return false;
            })
    
    $("#t16").find("p").mouseover(function(){
        if($("#res").find(".hide").length==64){
            var p=$(this);
            cur(this,"cur","p");cur(this,"hov","p");
            var mth=p.parents(".match");
            var menu=mth.find(".menu");
            var idx=$("#t16").find(".match").index(mth);
            var gx=parseInt(Math.floor(p.offset().left))+122+"px";
            var gy=parseInt(Math.floor(p.offset().top))-8+"px";
            $(".menu").hide();
            menu.css({"top":gy,"left":gx}).show();
            menu.find("a").click(function(){
                var _p=mth.find(".cur");
                var team=_p.html();
                cur(_p,"prom","p");
                $("#t8").find("p").eq(idx).html(team);
                mth.addClass("cld");
                //menu.remove();
                return false;
                })
            }
        return false;
        })
    
    
    $("#t8").find("p").mouseover(function(){
        if($("#t16").find(".cld").length==8){
            var p=$(this);
            cur(this,"cur","p");cur(this,"hov","p");
            var mth=p.parents(".match");
            var menu=mth.find(".menu");
            var idx=$("#t8").find(".match").index(mth);
            var gx=parseInt(Math.floor(p.offset().left))+122+"px";
            var gy=parseInt(Math.floor(p.offset().top))-8+"px";
            $(".menu").hide();
            menu.css({"top":gy,"left":gx}).show();
            menu.find("a").click(function(){
                $("#t16").find(".menu").remove();                          
                var _p=mth.find(".cur");
                cur(_p,"prom","p");
                var team=_p.html();
                $("#t4").find("p").eq(idx).html(team);
                
                mth.addClass("cld");
                //menu.remove();
                return false;
                })
            }
        //alert(idx);
        return false;
        })
    
    $("#t4").find("p").mouseover(function(){
        if($("#t8").find(".cld").length==4){
            var p=$(this);
            cur(this,"cur","p");cur(this,"hov","p");
            var mth=p.parents(".match");
            var menu=mth.find(".menu");
            var idx=$("#t4").find(".match").index(mth);
            var gx=parseInt(Math.floor(p.offset().left))+122+"px";
            var gy=parseInt(Math.floor(p.offset().top))-8+"px";
            $(".menu").hide();
            menu.css({"top":gy,"left":gx}).show();
            menu.find("a").click(function(){
                $("#t8").find(".menu").remove();        
                var _p=mth.find(".cur");
                cur(_p,"prom","p");
                var team=_p.html();
                var sibp=_p.siblings("p").html();
                $("#t2").find("p").eq(idx).html(team);
                $("#f34").find("p").eq(idx).html(sibp);
                
                mth.addClass("cld");
                //menu.remove();
                return false;
                })
            }
        //alert(idx);
        return false;
        })
    
    
    $("#f34").find("p").mouseover(function(){
        if($("#t4").find(".cld").length==2){
            var p=$(this);
            cur(this,"cur","p");cur(this,"hov","p");
            var mth=p.parents(".match");
            var menu=mth.find(".menu");
            var gx=parseInt(Math.floor(p.offset().left))+122+"px";
            var gy=parseInt(Math.floor(p.offset().top))-8+"px";
            $(".menu").hide();
            menu.css({"top":gy,"left":gx}).show();
            menu.find("a").click(function(){
                $("#t4").find(".menu").remove();                              
                var _p=mth.find(".cur");
                cur(_p,"prom","p");
                var team=_p.html();
                $("#t0").find("p").eq(2).html(team);
                mth.addClass("cld");
                //menu.remove();
                filldata();
                return false;
                })
            }
        //alert(idx);
        return false;
        })
    
    $("#final").find("p").mouseover(function(){
        if($("#t4").find(".cld").length==2){
            var p=$(this);
            cur(this,"cur","p");cur(this,"hov","p");
            var mth=p.parents(".match");
            var menu=mth.find(".menu");
            var gx=parseInt(Math.floor(p.offset().left))+122+"px";
            var gy=parseInt(Math.floor(p.offset().top))-8+"px";
            $(".menu").hide();
            menu.css({"top":gy,"left":gx}).show();
            menu.find("a").click(function(){
                $("#t4").find(".menu").remove();        
                var _p=mth.find(".cur");
                cur(_p,"prom","p");
                var team=_p.html();
                var sibp=_p.siblings("p").html();
                $("#t0").find("p").eq(0).html(team);
                $("#t0").find("p").eq(1).html(sibp);
                mth.addClass("cld");
                //menu.remove();
                filldata();
                return false;
                })
            }
        //alert(idx);
        return false;
        })
    
    $("#stepbtm p").mouseout(function(){
        $(this).removeClass("hov");                              
        })
    
    function filldata(){
        if($("#stepbtm").find(".prom").length==16){
            res.teamsel.length=res.top8.length=res.top4.length=res.top3.length=res.top16.length=0;
            for(var i=0; i<16; i++){
                res.teamsel.push($("#stepbtm").find(".prom").eq(i).text());
                }
            for(var i=0; i<16; i++){
                res.top16.push($("#t16").find("p").eq(i).text());
                }
            for(var i=0; i<8; i++){
                res.top8.push($("#t8").find("p").eq(i).text());
                } 
            for(var i=0; i<4; i++){
                res.top4.push($("#t4").find("p").eq(i).text());
                } 
            for(var i=0; i<3; i++){
                res.top3.push($("#t0").find("p").eq(i).text());
                }
            var v = res.teamsel + '|' + res.top16 + '|' + res.top8 + '|' + res.top4 + '|' + res.top3;
            $("#groupinfo").val(v);
            //alert(res.top3)
            }
        }
        
    //end of document.ready    
    })


/*标记当前*/
    function cur(ele,currentClass,tag){
        var ele= jQuery(ele)|| ele ;
        var tag= tag || "";
        var mark= currentClass || "cur";
        ele.addClass(mark).siblings(tag).removeClass(mark);
        }