html&javascript来制作一个图形计数器

碎片

这里的关键是跟踪

1. 当前对象
2. 过去的对象
3. 当前单元格

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

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/