将计数器添加到文本序列

时间:2014-11-13 13:20:08

标签: javascript html css counter

目前我正在开发一款我正在使用JavaScript进行游戏的游戏

其中一个功能允许用户查看他们必须输入的序列(打印出他们必须点击的颜色)

但问题是有时他们必须两次击中同一个圈子,这对用户来说并不是那么清楚。

所以我想知道是否可以在显示简单像

这样的序列中添加一个计数器

1.Red

2.Red

3.Blue

所以他们可以看到它想要第二个红色等等

这是一个jsfiddle所以你可以看到我的意思http://jsfiddle.net/uusL7hch/17/

JavaScript文件仅缩减为显示颜色名称的代码

的部分
        $.each(this.genSequence, function (index, val) { //iterate over each value in the generated array
            timerCount = index;
            setTimeout(function () {

                that.flash($(that.shape + val), 1, 300, val);
                if ($("#text").is(":checked")) {//Check Box Function

                $(".TextBox").children(":first").html('<b>' + that.colors[val - 1] + '</b>');
                }
            }, 500 * index * that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier

        });

        // Wait to start timer until full sequence is displayed
        setTimeout(function () {
            that.timerInterval = setInterval(function () {
                that.countDown()
            }, 100)

            setTimeout(function () {
                $(".TextBox").children(":first").html('');
            }, 500);
        }, 500 * timerCount * that.difficulty);
    },

任何帮助都会很棒

2 个答案:

答案 0 :(得分:1)

只需更改输出文字的行:

$(".TextBox").children(":first").html('<b>' + (index + 1) + ":" +that.colors[val-1]+'</b>');

更新了小提琴:http://jsfiddle.net/uusL7hch/18/

答案 1 :(得分:0)

您需要为您的数据列表定义css个人标记:

ol#your_list_name {
    list-style-type:decimal;
}