堆栈内存溢出
  繁体   English   中英

Javascript设置变量与onclick

[英]Javascript set variable with onclick

 原文  2012-03-23 23:38:01  2   2    javascript

问题描述

我正在研究一种动态宾果游戏，它在每个宾果游戏中随机生成数字，当你点击一个正方形时它会改变颜色。 我已经完成了。 我创建了一个表，在每个TD中我有以下代码： 

 <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等。

保重，祝大家愉快....

乔，约翰。

2 个解决方案

解决方案1
 2 已采纳  2012-03-24 15:55:44

我只有一个二维数组，（5x5）全部设置为零（除了自由空间，设置为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>

解决方案2
 0  2012-03-23 23:41:55

要更改您可以使用的ID： 

<td onclick="javascript:this.style.background = '#00ff00';this.id = 'newId';"    
 id="B1" class="bingo1"><script>document.write(patty[0]);</script></td>

这是你追求的吗？ 如果没有，你能否编辑你的问题更直接。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 用onclick改变Javascript变量 Javascript onclick更改变量 JavaScript onclick变量不起作用 通过onclick更改Javascript变量 Javascript 用 onClick 更新变量 内联onclick JavaScript变量 JavaScript onClick属性转换为变量 使用JavaScript检索onclick中的变量 如何用JavaScript设置onClick？ 设置onclick <a>使用javascript</a>
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM