javascript - 如何在单击按钮时将数组中的随机值分配给表格单元格

标签 javascript php jquery html

我想实现代码来创建一个宾果游戏应用程序,它在单击按钮时从数组中获取字母。

如何在单击运行按钮时将数组元素(如 array(a,b,c))随机分配给那些 3X3 表格单元格。当我在一行或对 Angular 线上得到像 abc 这样的序列时,我想增加计数值。

我开始了,但我无法实现代码。请问有什么建议吗?

这是我的代码

<html>
    <head>
    <script>
    function run(){ 
    var grid = document.getElementById("grid");
     for (var i = 0, row; row = grid.rows[i]; i++){
        row.cells[0].textContent = rand();    
        row.cells[1].textContent = rand();
        row.cells[2].textContent = rand();
     }
score()
    }
    function rand(){
var text = new Array();
var possible = "MCS*";
    return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
    </script>
    </head>
    <body>
    <form metdod="post">

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
    <tr>
      <td id="1-1" height="19" width="20%">&nbsp;</td>
      <td id="1-2" height="19" width="20%">&nbsp;</td>
      <td id="1-3" height="19" width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td id="2-1" height="16" width="20%">&nbsp;</td>
      <td id="2-2" height="16" width="20%">&nbsp;</td>
      <td id="2-3" height="16" width="20%">&nbsp;</td>

      </tr>
      <tr>
      <td id="3-1" height="19" width="20%">&nbsp;</td>
      <td id="3-2" height="19" width="20%">&nbsp;</td>
      <td id="3-3" height="19" width="20%">&nbsp;</td>
      </tr>
      </table>

      <br><br>

      <input type="button" onClick="return run();" value="run">
      </form>
      </body>
      </html>

提前致谢..

最佳答案

<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){ 
    var counter =0;
    var grid = document.getElementById("grid");
    for (var i = 0, row; row = grid.rows[i]; i++){
        row.cells[0].textContent = arr_num[getRandom()];    
        row.cells[1].textContent = arr_num[getRandom()];
        row.cells[2].textContent = arr_num[getRandom()];
    }
    var a = getMatch();
    for(var i=0;i<getMatch().length; i++){
        if(match.indexOf(a[i]) > -1)
            counter++;
    }
    document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
    var grid = document.getElementById("grid");
    var match1 = [[]];
    var match_dia =[];
    var temp_dia1 = 0;
    var temp_dia2 = 2;
    var temp_dia3 = 0;
    var temp_dia4 = 2;
    var match_col = [];
    for (var i = 0, row; row = grid.rows[i]; i++){
        match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
        match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
        if(match_col.length != 0){
            match_col[0] = match_col[0]+row.cells[0].textContent;
            match_col[1] = match_col[1]+row.cells[1].textContent;
            match_col[2] = match_col[2]+row.cells[2].textContent;
            match_col[3] = row.cells[0].textContent+match_col[3];
            match_col[4] = row.cells[1].textContent+match_col[4];
            match_col[5] = row.cells[2].textContent+match_col[5];
        }else{
            match_col[0] = row.cells[0].textContent;
            match_col[1] = row.cells[1].textContent;
            match_col[2] = row.cells[2].textContent;
            match_col[3] = row.cells[0].textContent;
            match_col[4] = row.cells[1].textContent;
            match_col[5] = row.cells[2].textContent;
        }
        if(match_dia.length != 0){
            match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
            match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
            match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
            match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
        }else{
            match_dia[0] = row.cells[temp_dia1++].textContent;
            match_dia[1] = row.cells[temp_dia2--].textContent;
            match_dia[2] = row.cells[temp_dia3++].textContent;
            match_dia[3] = row.cells[temp_dia4--].textContent;
        }
    }
    for(var i=0;i<match_col.length;i++){
        match1[match1.length++] = match_col[i];
    }
    match1[match1.length++] = match_dia[0];
    match1[match1.length++] = match_dia[1];
    return match1;
}
function getRandom(){
    return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
    <td id="1-1" height="19" width="20%">&nbsp;</td>
    <td id="1-2" height="19" width="20%">&nbsp;</td>
    <td id="1-3" height="19" width="20%">&nbsp;</td>
</tr>
<tr>
    <td id="2-1" height="16" width="20%">&nbsp;</td>
    <td id="2-2" height="16" width="20%">&nbsp;</td>
    <td id="2-3" height="16" width="20%">&nbsp;</td>

</tr>
<tr>
    <td id="3-1" height="19" width="20%">&nbsp;</td>
    <td id="3-2" height="19" width="20%">&nbsp;</td>
    <td id="3-3" height="19" width="20%">&nbsp;</td>
</tr>
</table>

<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>

关于javascript - 如何在单击按钮时将数组中的随机值分配给表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35083536/

相关文章:

javascript - 在 HTML5 中播放音频时的动画

jquery - 加载检查某些子节点的树时部分选择父节点

php - 数组和 "undefined index"之和

javascript - JavaScript 中的 Math.abs

javascript - 2D 游戏的最佳 HTML5/Javascript 引擎?

javascript - 我如何在 RethinkDB 中取消订阅 'changefeed'?

javascript - 覆盖 jPlayer 中的负剩余时间

javascript - JS : get runtime 'this' from outside function

PHP OOP 访问其他类中的方法

php - 将自定义批量操作添加到 Woocommerce 3 中的管理员订单列表