游戏战报表格，求优化【javascript吧】

做了个游戏战报表格显示效果，基本功能都实现了，就是有一点问题，当短时间点击切换更新数据时，音乐会播放多次。音乐是流媒体，我用定时器清理并没有立即关停播放，请教高人解决办法。
代码见附件

game.html

大小：4.01KB下载：6次转存：0次

文件已失效

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {padding-bottom: 0px;}
table {width:100%;text-align:center}
td {width:20%; }
#tabMenu td {width:25%; cursor:pointer;}
</style>
</head>
<body>
<table border="1" id="tabMenu" >
<tr><td>Overview</td><td>Units</td><td>Structures</td><td>Resources</td></tr>
</table>
<table border="1" id="tabShow" >
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<bgsound id="sound" name="sound" loop=1/>
<script>
var arrTab1 = [["Player", "Units", "Structures", "Resources", "Total Score"],
["p1(Terran)", "114380", "18110", "55354", "187844"],
["p2(Zerg)", "77090", "17500", "42410", "137000"],
["p3(Protoss)", "44030", "9000", "24722", "77752"],
["p4(Terran)", "23025", "3175", "20034", "46234"],
["p5(Zerg)", "8050", "1850", "5346", "15246"],
["p6(Protoss)", "54820", "10150", "28560", "93476"]];
var arrTab2 = [["Player", "Produced", "Killed", "Lost", "Total Score"],
["p1(Terran)", "307", "276", "65", "114380"],
["p2(Zerg)", "242", "118", "183", "77090"],
["p3(Protoss)", "134", "73", "120", "44030"],
["p4(Terran)", "160", "23", "125", "23025"],
["p5(Zerg)", "39", "30", "28", "8050"],
["p6(Protoss)", "139", "144", "121", "54820"]];
var arrTab3 = [["Player", "Constructed", "Razed", "Lost", "Total Score"],
["p1(Terran)", "63", "31", "31", "18110"],
["p2(Zerg)", "45", "37", "5", "17500"],
["p3(Protoss)", "40", "19", "21", "9000"],
["p4(Terran)", "18", "2", "10", "3175"],
["p5(Zerg)", "17", "0", "10", "3175"],
["p6(Protoss)", "45", "9", "16", "10150"]];
var arrTab4 = [["Player", "Gas Mined", "Minerals Mined", "Total Spent", "Total Score"],
["p1(Terran)", "15768", "39586", "43750", "55354"],
["p2(Zerg)", "10072", "32338", "38700", "42410"],
["p3(Protoss)", "6048", "18674", "22989", "24722"],
["p4(Terran)", "5552", "14482", "15101", "20034"],
["p5(Zerg)", "608", "4738", "4988", "5346"],
["p6(Protoss)", "7392", "21114", "26951", "28506"]];
var Tween = {
Quad : {
easeOut : function (t, b, c, d) {
return -c * (t /=d) * (t - 2)+b;
}
}
};
var timer=null;
function mplay(url) {
document.getElementById("sound").src = url;
document.getElementById("sound").loop = 1;
}
var kkkk=0; //当点击时，先让kkkk会自动加1，并赋值给局部变量vvv，因为kkkk是全局变量，当点击几次时，肯定跟之前的值不一样，而之前点击所运行的函数里的局部变量vvv是不变的，
//所以vvv与kkkk不相等，只有最新点击所运行的函数的vvv和kkkk才相等
var bbb=1;
function Run(target, c, d,vvv) {
var b = 0,
t = 0,
run = function () {
if (isNaN(c / 1)) {
target.innerHTML = c; //非数字原样显示
} else {
target.innerHTML = Math.ceil(Tween.Quad.easeOut(t, b, c, d)); //数字滚动
if (t < d) {
t++;
timer=setTimeout(run, 10);
} else {
clearTimeout(timer);
if(vvv==kkkk)
{
mplay("http://ydown.smzy.com/yinpin/2008-12/smzy_2008129212239876.mp3"); //结束音效
}
}
}
};
run();
}
function StartRun(target, arr) {
var vvv=kkkk;
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[0].length; j++) {
Run(target.rows[i].cells[j], arr[i][j], 200, vvv); //遍历每一个单元格
}
}
}
window.onload = function () {
var oTab = document.getElementById("tabMenu");
var osTab=document.getElementById("tabShow");
mplay("http://ydown.smzy.com/yinpin/2008-12/smzy_200812922032490.mp3");//开始音效
StartRun(osTab, arrTab1);
oTab.rows[0].cells[0].onclick = function () {
kkkk++;
mplay("");
mplay("http://ydown.smzy.com/yinpin/2008-12/smzy_200812922032490.mp3");//开始音效
StartRun(osTab, arrTab1);
};
oTab.rows[0].cells[1].onclick = function () {
kkkk++;
mplay("");
mplay("http://ydown.smzy.com/yinpin/2008-12/smzy_200812922032490.mp3");//开始音效
StartRun(osTab, arrTab2);
};
oTab.rows[0].cells[2].onclick = function () {
kkkk++;
mplay("");
mplay("http://ydown.smzy.com/yinpin/2008-12/smzy_200812922032490.mp3");//开始音效
StartRun(osTab, arrTab3);
};
oTab.rows[0].cells[3].onclick = function () {
kkkk++;
mplay("");
mplay("http://ydown.smzy.com/yinpin/2008-12/smzy_200812922032490.mp3");//开始音效
StartRun(osTab, arrTab4);
};
}
</script>
</body>
</html>

Thanks .受教了。

日	一	二	三	四	五	六

游戏战报表格，求优化

扫二维码下载贴吧客户端