weixin_33724659
weixin_33724659
采纳率0%
2015-05-15 11:17

如何创建秒表

I have an Ajax call like this:

$(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 } ?>  
});

And my HTML looks like this:

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

The code for opening the jQuery UI Dialogue is like this

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

I want to Show a timer in the POPUP which should start when the Ajax call is done and stop when I get the response. It should look like a Stop watch

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • weixin_33712987 weixin_33712987 6年前
    $(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 } ?>  
    
        });
    
    点赞 评论 复制链接分享
  • weixin_33713707 weixin_33713707 6年前
    <div class="timer"></div> //put this div where you want to show the timer
    
    <input type="button" onClick="fireAJAX();"> // firing ajax call
    

    Then in your fireAJAX() function

    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
            }
      });
    }
    

    So everytime when you call fireAJAX function, the timer will start from 1

    点赞 评论 复制链接分享
  • weixin_33698823 weixin_33698823 6年前

    before ajax start:

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

    when you get the response:

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

    UPDATE:

    with a visual timer demo

    UPDATE:

    seconds and minutes demo

    UPDATE:

    with number round demo

    点赞 评论 复制链接分享