javascript - html & javascript 制作图形计数器

Question

我想打勾某些事件的天数，并标记他们的“连续”-我想将它们表示为桌子上的正方形或圆形

例如“晴天”与“阴天”

每个 COLUMN 都会计算一个事件的发生，事件的变化会移动到下一个 COLUMN。序列将逐行向上（或向下）进行。

示例 - 表格 5 行 x 10 列（S = 晴天，C = 阴天）仅使用 javascript - 使用两个按钮“s”和“c”我将如何告诉 dom 下一个标记哪个单元格。

开始表格空白 - 单击“s”，s 进入第一个单元格，单击“s”，s 进入第一列第二行，单击“c”（因为它是上次运行天数的变化）ac 进入第二列第一行...所以简而言之，如果当前点击与最后一次相同，则前进一行，如果不同，则前进一列...在这方面，它不应该只是2，我可以有 3 或 4 种“类型”的事件（如雨或雪）。

我可以把它全部放在一个数组中吗：[s,s,s,s,c,c,s,s,s,s,c,s,c,s,c,c,c,c]

将每个事件添加到数组中，然后循环数组，当 current!=last ???

但是我如何引用“正确”的表格单元格？？？？？？

<table border="1" width="460" align="center">
    <tr>
        <td>S</td>
        <td>S</td>
        <td>S</td>
        <td>S</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>C</td>
        <td>C</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>S</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>C</td>
        <td>C</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>S</td>
        <td>S</td>
        <td>S</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

score 1 · Accepted Answer

碎片

这里的关键是跟踪

当前对象
过去的对象
当前单元格

每个对应一个变量。在循环时，根据需要增加这些变量。
例如，如果当前对象与过去对象不同（断线），则必须将过去对象更改为当前对象，然后继续：

if (current !== past) {
    past = current;
}

所以这是一个开始。

现在，您必须跟踪当前单元格。让我们使用一个 JS 对象来定义行和列。由于我们从第 1 行第 1 列开始，我们将默认设置为：

var cell = {
    "row": 1,
    "col": 1
}

现在，您必须根据条纹增加行和列。如果连胜延长，那么你必须增加行。如果连胜被破坏，您必须增加列并将行设置回 1：

if (current !== past) {
    past = current;

    // Increment the column and reset the row
    cell.col++;
    cell.row = 1;
} else {
    // Increment row
    cell.row++;
}

现在，我们必须将对象放入正确的单元格中。我们将使用 jQuery 的类 CSS 选择器来执行此操作。特别是，:nth-child(...)选择器在这里很有用。
此选择器仅选择父项中的第 n 个编号的子项。例如，td:nth-child(2)将选择td其父级的第二个内部。

实现这一点相当容易，因为我们已经有了cell对象：

$('table tr:nth-child(' + cell.row + ') td:nth-child(' + cell.col + ')').html(current);

.text(current)在这里也可以使用，但它只接受纯文本。

把它们放在一起

我们将array用作天气事件数组的定义：

var array = [s, s, s, s, c, c, s, s, s, s, c, s, c, s, c, c, c, c];

当然，我们使用for循环来遍历数组：

var s = "s",
    c = "c",
    array = [s, s, s, s, c, c, s, s, s, s, c, s, c, s, c, c, c, c],
    cell = {
        "row": 1,
        "col": 1
    };

for (var i = 0; i < array.length; i++) {

    var current = array[i],
        past;

    // Catch the initial state
    if (i === 0) {
        past = current;
        $('table tr:nth-child(' + cell.row + ') td:nth-child(' + cell.col + ')').html(current);
    } else {
        past = array[i - 1];
        if (current !== past) {
            past = current;
            // Increment the column and reset the row
            cell.col++;
            cell.row = 1;
        } else {
            // Increment row
            cell.row++;
        }

        $('table tr:nth-child(' + cell.row + ') td:nth-child(' + cell.col + ')').html(current);
    }

}

JSFiddle：http:
//jsfiddle.net/kTsEx/3/

javascript - html & javascript 制作图形计数器

1 回答 1

碎片

把它们放在一起

Related

Reference