如何创建秒表

Question

我有一个这样的 Ajax 调用：

$(document).on('submit', '#formPropiedades', function(event) {
    event.preventDefault();
    var content = {}, url = "http://www.xxxxyzzz.com/xxx/yyy/web/ajax.php";    
    $("#dialog1").dialog("open");
    var posting = $.post(url, {
        im_core: 'saveAllAdds',
        idFeed: <?php echo $_POST['idFeed'] ?>,
        pais: <?php echo $pais1?>
    }).done(function(data) {
        if (data == 1)
            $(".overlay-bg1").html("Suces....");
        else
            $(".overlay-bg1").html(data);
    }); 
<?php } ?>  
});

我的 HTML 如下所示：

<div id="dialog1" title="Attention!!" style="width:60%">
    <div class="overlay-bg1">Saving the Adds....</div>
</div>

打开jQuery UI Dialogue的代码是这样的

$(function () {
    $("#dialog1").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "",
            duration: 1000
        },  
    });
});

我想在 POPUP 中显示一个计时器，它应该在 Ajax 调用完成时启动并在我收到响应时停止。 它应该看起来像一个秒表

Answer 1

<div class="timer"></div> //put this div where you want to show the timer

<input type="button" onClick="fireAJAX();"> // firing ajax call

然后在你的fireAJAX()函数中

function fireAJAX()
{
    var counter = 0;
    var interVal = setInterval(function () {
       $('.timer').html(++counter);     
    }, 1000);

    //Start timer and append the counter to 'timer' div every second

    $.ajax({
        type : "POST",
        url : URL,
        success : function(response){                
             clearInterval(interVal );
             // stop the counter after ajax response
        }
  });
}

所以每次调用fireAJAX函数时，定时器都会从 1 开始

Answer 2

在 ajax 开始之前：

var startTime = (new Date()).getTime();

当你得到回应时：

var nowTime = (new Date()).getTime();
var theTime = nowTime - startTime;

更新：

带有可视化计时器演示

更新：

秒和分钟演示

更新：

带数字圆形演示

Answer 3

$(document).on('submit', '#formPropiedades', function (event) {
    event.preventDefault();
    var content = {},
    url="http://www.xxxxyzzz.com/xxx/yyy/web/ajax.php"; 
        var setTimer = setInterval(function(){ //start your timer
        var d = new Date();
        document.getElementById("myDivID").innerHTML = d.toLocaleTimeString();//give the id of your div
        },1000);                      
    $("#dialog1").dialog("open");
     var posting = $.post(url, {
            im_core:'saveAllAdds',
            idFeed :<?php echo $_POST['idFeed'] ?>,
            pais:<?php echo $pais1?>
        }).done(function (data) {
            clearInterval(clearInterval); //stop your timer
            if(data==1)
            $(".overlay-bg1").html("Suces....");
            else
            $(".overlay-bg1").html(data);

        }); 
    <?php } ?>  

    });