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);
}