Question

我做了一个简单的宾果游戏项目。我有一个问题，我有表，如果以水平/垂直/交叉顺序选择表，那应该在Javascript中弹出一个简单的警报。代码如下：

HTML

<html>
<head>
</head>

<body>
<div class="container" >
    <div class="table-row">
        <div class="kolom" onclick="ubah(this)" id="cell-1-1" data-index="1"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-2" data-index="2"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-3" data-index="3"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-4" data-index="4"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-5" data-index="5"></div>
    </div>
    <div class="table-row">
        <div class="kolom" onclick="ubah(this)" id="cell-1-6" data-index="6"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-7" data-index="7"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-8" data-index="8"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-9" data-index="9"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-10" data-index="10"></div>
    </div>
    <div class="table-row">
        <div class="kolom" onclick="ubah(this)" id="cell-1-11" data-index="11"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-12" data-index="12"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-13" data-index="13"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-14" data-index="14"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-15" data-index="15"></div>
    </div>
    <div class="table-row">
        <div class="kolom" onclick="ubah(this)" id="cell-1-15" data-index="16"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-17" data-index="17"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-18" data-index="18"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-19" data-index="19"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-20" data-index="20"></div>
    </div>
    <div class="table-row">
        <div class="kolom" onclick="ubah(this)" id="cell-1-21" data-index="21"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-22" data-index="22"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-23" data-index="23"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-24" data-index="24"></div>
        <div class="kolom" onclick="ubah(this)" id="cell-1-25" data-index="25"></div>
    </div>

</div>
</body>
</html>

CSS

/* for entire table */
.container{ 
    display:table;
    width:1000px;
    height: 500px;
    border-collapse:collapse;
    margin:0 auto;
    line-height:25px;

}
/* for row*/
.table-row{  
    display:table-row;
   background-color: #ffffff;
}
/* for column*/
.kolom{ 
    display:table-cell;
    border:2px solid #000000

}
/* for column when clicked */
.kolom1{
     display:table-cell;
    background-color: #FFFF00;
    border:2px solid #000000
}
</style>

JAVASCRIPT，这个代码中可能缺少某些内容，我不知道如何在水平顺序或垂直方向单击5次时弹出警报。

<script>

function ubah(yo){
    if (yo.className == "kolom")
    {
       yo.className = "kolom1";

    }
    else if (yo.className == "kolom1") {
        alert(" Click on another box");
    }

    else if (nama = $(".kolom").attr('data-index')) {
        alert("Bingo")
    }
}

window.onload = function(){
    var x = document.getElementsByClassName("kolom");
    for (var i = 0; i < x.length; i++)
        x[i].innerHTML = Math.floor(Math.random() * (25 - 1)) + 1;
        x[i].innerHTML = Math.floor(Math.random() * (25 - 1)) + 1;
}

function seleksi(){
    var a = document.getElementsByClassName("kolom").rows.length;
    var b = document.getElementsByClassName("kolom").columns.length;
    if (a[0] == a[1]) {
        alert("Bingo");
    }
}

</script>

Answer 1

alert("alert content.");

如果您对详细信息感兴趣，请参阅以下文档：

https://developer.mozilla.org/en-US/docs/Web/API/Window/alert

宾果游戏，在程序完成后添加警报

1 个答案: