Question

Fiddle 我想让进度条每秒填满25％。我目前的代码使其达到100％并保持点击状态。我不确定使用jquery或css是否最好。或者，如果有更简单的方法来做到这一点。另外，如何从一个.click中多次执行操作。就像你单击战斗它击中怪物，然后等待进度条填充，然后再次击中怪物等等？

$('#battle').click(function() {
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage");
  $('#bar').val(25).delay(1000);
  $('#bar').val(50).delay(1000);
  $('#bar').val(75).delay(1000);
  $('#bar').val(100);
});

Answer 1

你走了！ https://jsfiddle.net/6nrjw0Le/

对于你的例子，我正在使用

setTimeout()

您的示例已编辑。

var progress = function(sec){
    var interval = 250;//milliseconds
    setTimeout(function(){
    sec = sec+25;
        $('#bar').val(sec);
        if(sec < 100)
            progress(sec);//call self with new value
    },interval)
}

$('#battle').click(function() {
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage");
  /*$('#bar').val(25).delay(1000);
  $('#bar').val(50).delay(1000);
  $('#bar').val(75).delay(1000);
  $('#bar').val(100);*/
  progress(0);//initialize progress bar
});

delay（）是异步的。将一个接一个的延迟放在一起并不代表你在第一个完成后得到执行。

带有.delay的进度条

1 个答案: