Javascript设置变量与onclick
问题描述:
我正在一个动态的宾果游戏,随机生成每个宾果广场的数字,当你点击一个正方形它会改变颜色。我已经完成了。我创建了一个表,并且每个TD I内有以下代码:Javascript设置变量与onclick
<td onclick="javascript:this.style.background = '#00ff00';"
id="B1" class="bingo1"><script>document.write(patty[0]);</script></td>
当页面被加载的每个正方形(TD)将具有被初始设置为0的变量(VAR B1 = 0;)。当你点击广场的变量增加到1,但我不知道如何做到这一点。我认为这可能是通过onclick事件完成的,也可能是在背景颜色改变时检测到。但是,正如我所说,我不知道如何去做这些。任何和所有的帮助将不胜感激。谢谢!
- 每个广场将有一个不同的ID,如B2,B3,B4,B5,I1,I2等
保重,有一个伟大的日子....
ciao, john。
答
我也只是有一个二维阵列,(5×5)全部设为零(一边的*空间,它被设置为1),然后将单独的细胞是按钮一些阵列值更改为1
像这样:
<!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>Bingo</title>
<style>
#card {width:510px; margin-right:auto; margin-left:auto; position:relative; }
.top {border: thin #000 solid; float:left; width:100px; height:20px; text-align:center;}
.cell {border: thin #000 solid; float:left; width:100px; height:60px;text-align:center;padding-top:40px;}
.on {border: thin #000 solid; float:left; width:100px; height:60px; background-color:#0F0;text-align:center;padding-top:40px;}
.win {border: thin #000 solid; float:left; width:100px; height:60px; background-color:#F00;text-align:center;padding-top:40px;}
</style>
</head>
<body>
<div id="card"><div class="top">B</div><div class="top">I</div><div class="top">N</div><div class="top">G</div><div class="top">O</div></div>
</body>
<script type="text/javascript">
var score=new Array();
var existingNumbers=new Array();
var r,c;
for(r=0;r<5;r++){
for(c=0;c<5;c++){
score[r]=Array();
score[r][c]=0;
if((c==2)&&(r==2)){
score[r][c]=1;
document.getElementById('card').innerHTML+='<div id="cell'+r+c+'" class="on">FREE</div>';
}
else{
document.getElementById('card').innerHTML+='<div id="cell'+r+c+'" class="cell" onclick="tap('+r+','+c+');">'+number(c)+'</div>';
}
}
document.body.innerHTML+='<br/>';
}
function number(col){
var num=Math.ceil(Math.random()*15)+(15*col);
while(existingNumbers.indexOf(num)!=-1){
num=Math.ceil(Math.random()*15)+(15*col);
}
existingNumbers.push(num);
return num;
}
function tap(r,c){
document.getElementById('cell'+r+c).className="on";
score[r][c]=1;
winTest();
}
function winTest(){
//there has got to be a more concise way of doing this, but right now it's just for function
var winner=false;
r1=score[0][0]+score[1][0]+score[2][0]+score[3][0]+score[4][0];
r2=score[0][1]+score[1][1]+score[2][1]+score[3][1]+score[4][1];
r3=score[0][2]+score[1][2]+1+score[3][2]+score[4][2];
r4=score[0][3]+score[1][3]+score[2][3]+score[3][3]+score[4][3];
r5=score[0][4]+score[1][4]+score[2][4]+score[3][4]+score[4][4];
c1=score[0][0]+score[0][1]+score[0][2]+score[0][3]+score[0][4];
c2=score[1][0]+score[1][1]+score[1][2]+score[1][3]+score[1][4];
c3=score[2][0]+score[2][1]+1+score[2][3]+score[2][4];
c4=score[3][0]+score[3][1]+score[3][2]+score[3][3]+score[3][4];
c5=score[4][0]+score[4][1]+score[4][2]+score[4][3]+score[4][4];
d1=score[0][0]+score[1][1]+1+score[3][3]+score[4][4];
d2=score[0][4]+score[1][3]+1+score[3][1]+score[4][0];
if(r1==5){
document.getElementById('cell00').className="win";
document.getElementById('cell10').className="win";
document.getElementById('cell20').className="win";
document.getElementById('cell30').className="win";
document.getElementById('cell40').className="win";
winner=true;
}
if(r2==5){
document.getElementById('cell01').className="win";
document.getElementById('cell11').className="win";
document.getElementById('cell21').className="win";
document.getElementById('cell31').className="win";
document.getElementById('cell41').className="win";
winner=true;
}
if(r3==5){
document.getElementById('cell02').className="win";
document.getElementById('cell12').className="win";
document.getElementById('cell22').className="win";
document.getElementById('cell32').className="win";
document.getElementById('cell42').className="win";
winner=true;
}
if(r4==5){
document.getElementById('cell03').className="win";
document.getElementById('cell13').className="win";
document.getElementById('cell23').className="win";
document.getElementById('cell33').className="win";
document.getElementById('cell43').className="win";
winner=true;
}
if(r5==5){
document.getElementById('cell04').className="win";
document.getElementById('cell14').className="win";
document.getElementById('cell24').className="win";
document.getElementById('cell34').className="win";
document.getElementById('cell44').className="win";
winner=true;
}
if(c1==5){
document.getElementById('cell00').className="win";
document.getElementById('cell01').className="win";
document.getElementById('cell02').className="win";
document.getElementById('cell03').className="win";
document.getElementById('cell04').className="win";
winner=true;
}
if(c2==5){
document.getElementById('cell10').className="win";
document.getElementById('cell11').className="win";
document.getElementById('cell12').className="win";
document.getElementById('cell13').className="win";
document.getElementById('cell14').className="win";
winner=true;
}
if(c3==5){
document.getElementById('cell20').className="win";
document.getElementById('cell21').className="win";
document.getElementById('cell22').className="win";
document.getElementById('cell23').className="win";
document.getElementById('cell24').className="win";
winner=true;
}
if(c4==5){
document.getElementById('cell30').className="win";
document.getElementById('cell31').className="win";
document.getElementById('cell32').className="win";
document.getElementById('cell33').className="win";
document.getElementById('cell34').className="win";
winner=true;
}
if(c5==5){
document.getElementById('cell40').className="win";
document.getElementById('cell41').className="win";
document.getElementById('cell42').className="win";
document.getElementById('cell43').className="win";
document.getElementById('cell44').className="win";
winner=true;
}
if(d1==5){
document.getElementById('cell00').className="win";
document.getElementById('cell11').className="win";
document.getElementById('cell22').className="win";
document.getElementById('cell33').className="win";
document.getElementById('cell44').className="win";
winner=true;
}
if(d2==5){
document.getElementById('cell04').className="win";
document.getElementById('cell13').className="win";
document.getElementById('cell22').className="win";
document.getElementById('cell31').className="win";
document.getElementById('cell40').className="win";
winner=true;
}
if(winner){
alert('You WIN!!');
}
}
</script>
</html>
答
要改变,你可以使用id:
<td onclick="javascript:this.style.background = '#00ff00';this.id = 'newId';"
id="B1" class="bingo1"><script>document.write(patty[0]);</script></td>
是,这是你后?如果不是,你可以编辑你的问题,以便更直接。
+0
对不起。对于每个正方形,我想要一个最初设置为0的变量(var B1 = 0;)。当你点击正方形时,变量增加+1。 – Mock26 2012-03-24 01:55:50
你能也许给一个侧面由端的点击之前和之后点击'id's?你真的应该离开在线JavaScript,分离你的模型和行为(如果仅仅为了将来的可维护性)。 – 2012-03-23 23:40:20
他的id是指DOM元素。 *你的意思是“分配一个初始值......”*它是什么意思? – Hamish 2012-03-24 00:00:27
你想改变html id或其他东西 – Starx 2012-03-24 20:42:55