Question

我正在推出一个项目，以制作一个多方面的Tic-Tac-Toe游戏......

然而...

每个table cell给我这个烦人的闪烁光标。这就像是input。

任何想法为什么......？或者如何删除它？

Chrome工作正常。 Firefox 26.0 throws this error.

当前的实时版本： http://sinsysonline.com/tictactoe_test.html

完整代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tic Tac Toe! (and more...)</title>
  <meta name="description" content="Tic Tac Toe">
  <meta name="author" content="SinSysOnline">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <style>
  body{
    font-family:"Lucida Console", Monaco, monospace;
  }
  td{
    padding:0;
    margin:0;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    width:100px;
    height:100px;
    text-align:center;
    font-size:72px;
  }
  td:last-child{
    border-right:none;
    border-bottom:1px solid #000;
  }
  tr:last-child td{
    border-bottom:none;
  }
  table{
    padding:25px;
    margin:0 auto;
    cursor:pointer;
  }
  #dashboard{
    background:#CCC;
    padding:15px;
    border:1px solid #000;
    box-shadow:0 5px 15px #000;
  }
#alert{
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    color:#F00;
    text-align:right;
}
.check{
    background:url("check.png");
}
</style>
</head>

<body>
<div id="dashboard">
    <p>How large is your grid? (3-10)</p>
    <input type="text" id="size" size="1" />
    <input type="button" id="go" value="Create Board / Reset" />
    <p id="alert">Alerts Live Here</p>
</div>

<table id="board">
</table>

<script>
var b=[], c=0;
$("#go").click(function () {
    var b=[],
        s = parseInt($("#size").val());

    if (s<3 || s>10) { alert("That is not a valid input. Please select 3-10"); return; }

    $('#board tr').remove();
    $('#alert').text("Your Turn!");

    for(var i=0;i<s;i++){
        var tempArr = [];
        for(var j=0;j<s;j++){ tempArr[j] = ""; }
        b.push(tempArr);
    }

    for (var i = 0; i < s; i++) {
        var $tr = $('<tr />', {id: 'row_' + i }).data('index', i + 1);
        $("#board").append("<tr id='row_" + i + "'>");

        for (var j = 0; j < s; j++) {
            $('<td />', {
                id: 'col_' + j
            }).data('index', j + 1).appendTo($tr);
        }

        $("#board").append($tr);
    }

    $("#board").on('click', 'td', function () {
        var $td = $(this),
            td = $td.data('index'),
            row = $td.parent().data('index');

        if(b[row-1][td-1]!==""){
            alert("Somebody already went there...");
        } else {
            b[row-1][td-1] = "X";
            $td.addClass("check");
            $('#alert').text(b);
        }
    });
});
</script>
</body>
</html>

Answer 1

使用CSS轻松

查看此网站

http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=url%28smiley.gif%29,url%28myBall.cur%29,auto

td{

    cursor:default;
    padding:0;
    margin:0;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    width:100px;
    height:100px;
    text-align:center;
    font-size:72px;
  }

非常简单。来自JS的表创建闪烁光标

1 个答案: