继世界杯模拟抽签之后，公司又弄了个世界杯模拟晋级，在抽签真实结果的基础上，每组抽取两队，选出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);
        }

转载于:https://www.cnblogs.com/trance/archive/2009/12/05/1617496.html

2010年世界杯 模拟夺冠程序相关推荐

  1. GPIO模拟I2C程序实现

    GPIO模拟I2C程序实现. I2C是由Philips公司发明的一种串行数据通信协议,仅使用两根信号线:SerialClock(简称SCL)和SerialData(简称SDA).I2C是总线结构,1个 ...

  2. 单片机IO口模拟串口程序（发送+接收

    单片机IO口模拟串口程序(发送+接收)[转] qcmc 发表于 - 2011-6-23 0:42:00 前一阵一直在做单片机的程序,由于串口不够,需要用IO口来模拟出一个串口.经过若干曲折并参考了一些 ...

  3. 2010年01期《程序员》配套源码及相关链接

    为了方便大家查阅,现把2010年01期<程序员>杂志中相关链接及代码发布在此: 程序天下事 P15页,推荐资源: 诗剑书生的专栏:http://blog.csdn.net/axman/ P ...

  4. 串口发送程序linux,单片机IO口模拟串口程序（发送+接收

    前一阵一直在做单片机的程序,由于串口不够,需要用IO口来模拟出一个串口.经过若干曲折并参考了一些现有的资料,基本上完成了.现在将完整的测试程序,以及其中一些需要总结的部分贴出来. 程序硬件平台:11. ...

  5. SIMULIA现实仿真解决方案 SIMULIA仿真模拟应用程序

    由 3DEXPERIENCE® 平台提供技术支持,SIMULIA 可提供仿真模拟应用程序,这些应用程序使用户能够探究现实生活中产品.自然和生命的行为 SIMULIA 通过虚拟测试实现性能要求促进协作. ...

  6. 简单的模拟电话簿程序（java）

    要求:  编写一个模拟电话簿程序,实现对联系人的增删查 提示: HashMap存储联系人,Key为联系人姓名,Value为其电话号码 在console控制台中模拟增删查改 一.搭建项目结构 项目分层, ...

  7. matlab画一维波动方程,MATLAB编辑一维波动方程的模拟的程序.doc

    MATLAB编辑一维波动方程的模拟的程序 一维波动方程的模拟 程序: function wave_equation() %一维线性齐次波动方程 options={'空间杆长L','空间点数N' ,'时 ...

  8. 计算机模拟软件分类,计算机水平考试-软件设计师分类模拟题程序语言(一)

    计算机水平考试-软件设计师分类模拟题程序语言(一) (13页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 14.9 积分 软件设计师分类模拟题程序语言(- ...

  9. 汇编计算机钢琴流程图,汇编模拟电子琴程序

    <汇编模拟电子琴程序>由会员分享,可在线阅读,更多相关<汇编模拟电子琴程序(13页珍藏版)>请在人人文库网上搜索. 1.汇编语言程序设计课程设计报告题目: 模拟电子琴(音乐播放 ...

最新文章

  1. go-kit微服务学习-官方示例stringsvc学习
  2. 报告 | 超级智能城市2.0 – 人工智能引领新风尚（附下载）
  3. 【Linux】文件特殊权限 SUID/SGID/Sticky Bit
  4. 并发基础篇（一） 线程介绍
  5. linux网卡Bond模式
  6. formdata怎么传数组_如何使用formData上传file数组
  7. c语言中图形驱动程序功能_C / C ++中的图形：一些更有趣的功能
  8. python随机生成列表_python 实现快速生成连续、随机字母列表
  9. 【windows核心编程】线程局部存储TLS
  10. [简单dp]toj1179
  11. 如何在ASP.NET Core中构造UrlHelper，及ASP.NET Core MVC路由讲解
  12. 数据库原理及应用实验四 简单查询
  13. 如何实施一个BI项目（附项目管理模板）
  14. log4j日志级别配置完成后不生效 系统一直打印debug日志
  15. 2021年G2电站锅炉司炉考试题库及G2电站锅炉司炉考试报名
  16. mysql yum 安装
  17. 英国一名28岁女子晋升曾祖母
  18. fast-lio2论文阅读 《FAST-LIO2: Fast Direct LiDAR-inertial Odometry》
  19. 美元指数K线图怎么看？
  20. srand rand RAND_MAX

热门文章

  1. 手把手教程——自制ARM仿真器Jlink-OB-072，原来这么简单
  2. 搭建属于你自己的RAMOS系统 – WIN7+VHD+GURB map方式
  3. MyEclipse2016破解和激活
  4. 接4G模块的网关自动IP也能直连电脑
  5. 小学计算机选修课简介,小学信息技术课程标准
  6. 再读《架构整洁之道》
  7. SQLServer 日期函数大全
  8. 手把手教你做视频播放器（四）－刷新与停止刷新列表
  9. 论文阅读：（一）Voxblox++：Volumetric Instance-Aware Semantic Mapping and 3D Object Discovery
  10. alpha beta 剪枝算法