Question

所以我正在制作一个在HTML文本输入字段中显示一些随机数的表格，我想这样做：

单击一个按钮时，每个单元格的延迟时间为300毫秒，在此时间段内，单元格会改变颜色，插入随机数，然后将单元格颜色返回到其原始值，然后移动到下一个单元格，创造一个很好的视觉显示。

我的主要问题是，我不知道如何让每个细胞突出显示自己的细胞。正在计算价值。我想把＆＃34; 这个＆＃34;在 gen（）函数中但我丢失了它。任何帮助都会非常感激！

示例：

<table>
  <tr>
    <td><input type="text" id="rand1"></td>
    <td><input type="text" id="rand2"></td>
  </tr>
  <tr>
    <td><input type="text" id="rand3"></td>
    <td><input type="text" id="rand4"></td>
  </tr>
</table>
<input type="button" id="generate">

的jQuery

$('#generate').click(function() {
    randomise();
});

function randomise() {
    $('#rand1').val(gen(20,60));
    $('#rand2').val(gen(30,50));
    $('#rand3').val(gen(20,100));
    $('#rand4').val(gen(40,60));
}

function gen(x, y) {
    var rand = Math.round((Math.random() * (y-x)) + x);
    return rand;
}

Answer 1

你可以这样做：

  $("td").css({border: "1px solid #ccc"})
    $(".rand").css({opacity: 0});
    $('#generate').click(function() {
        randomise();
    });

    function randomise() {
        var myArray = [gen(20,60), gen(15,50), gen(10,25), gen(300, 400)]
        $(".rand").each(function(index){
            $(".rand").css({opacity: 0});
            var delay = (index+1)*300;
            $(this).val(myArray[index]).delay(delay).css({backgroundColor: "#000", color: "#fff"}).animate({opacity:1}, function(){
                $(this).delay(delay).css({backgroundColor: "#fff", color:"#000"})
            });
        });
    }

    function gen(x, y) {
        var rand = Math.round((Math.random() * (y-x)) + x);
        return rand;
    }

这是有效的fiddle

计算值时突出显示单元格（+间隔）

1 个答案: