首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Jquery倒计时:如何在倒计时的不同时刻进行回调?

Jquery倒计时:如何在倒计时的不同时刻进行回调?
EN

Stack Overflow用户
提问于 2016-12-15 16:26:46
回答 3查看 764关注 0票数 1

我有一个简单的要求。

  • 当页面显示时,从30分钟开始的倒计时将显示在页面的右下角。
  • 15秒后倒计时就被隐藏起来了。
  • 在过期前1分钟,倒计时将再次显示,直至结束。
  • 到期时,将显示一个javascript警报,通知用户时间到了。 $(“#div倒计时”) .countdown(timeToExpire,function (event) { $(this).text( event.strftime('%M:%S') );//15秒后做某事//1740秒后,即29分钟,做某事//1800秒后,即30分钟,做某事}

上面的代码允许我显示倒计时。有什么办法在倒计时进行时进行回调吗?第一个在15秒之后,这样我就可以隐藏显示倒计时的div,在过期前1分钟,再次显示它,并在结束时显示JavaScript弹出?

坦斯克帮了我

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-12-15 16:46:25

我假设您已经知道如何隐藏、显示或更改HTML标记的内部文本,并且它已经位于HTML的正确位置。让我们集中讨论倒计时应如何运作:

代码语言:javascript
复制
$(function() {
    //Initialization
    var minutes = 30;
    var seconds = 0;
    //Make sure your div exists
    var countDownContext = $("#divCountdown");
    //Showing things initially
    countDownContext.text(minutes + ":" + seconds);
    //15 seconds
    var initialTime = 15;
    //We store the interval to be able to stop the repetition later
    var myInterval = setInterval(function() {
        //Are we still inside those 15 seconds at the start?
        if (initialTime > 0) {
            //Was this the last second?
            if (--initialTime === 0) {
                //Then hide
                countDownContext.hide();
            }
        }
        //We decrease seconds and check whether it, before decreasing was 0
        if (seconds-- === 0) {
            //If it was, then we decrease a minute and set seconds to 59
            minutes--;
            seconds = 59;
        }
        //Refresh inner text
        countDownContext.text(minutes + ":" + seconds);
        //Is the last minute reached?
        if ((minutes === 1) && (seconds === 0)) {
            //Then show
            countDownContext.show();
        }
        //Is the time expired?
        if ((minutes <= 0) && (seconds <= 0)) {
            //Then alert about it
            alert("Your time is up");
            //And clear the interval
            clearInterval(myInterval);
        }
    }, 1000);
});

编辑:

这里描述的逻辑可以与您打算使用的插件一起使用,请看一下示例。

票数 0
EN

Stack Overflow用户

发布于 2016-12-15 16:44:52

查看文档http://hilios.github.io/jQuery.countdown/documentation.html#event-object,事件对象提供对倒计时中剩余的总分钟/总秒的访问,您可以将其与update.countdownfinish.countdown事件组合起来,如下所示

代码语言:javascript
复制
$("#divCountdown")
   .countdown(timeToExpire, function (event) {
      $(this).text(
        event.strftime('%M:%S')
      );
}).on('update.countdown',function(event) {
   //check event.offset.totalMinutes value to show/hide object
}).on('finish.countdown',function(event){
   //display alert
});
票数 2
EN

Stack Overflow用户

发布于 2016-12-15 16:52:55

您已经每秒钟调用一个处理程序,所以只需做一些计算就可以确定经过的/剩余的时间:

代码语言:javascript
复制
var $countdown = $("#divCountdown"),
    countdownMinutes = 30,
    timeStart = new Date().getTime(),
    timeEnd = timeStart + countdownMinutes * 60 * 1000;

$countdown
    .countdown(timeEnd, function (e) {

        var now = e.timeStamp,
            secondsElapsed = Math.floor((now - timeStart) / 1000),
            secondsRemaining = Math.ceil((timeEnd - now) / 1000);

        $countdown.text(e.strftime('%M:%S'));

        switch (secondsElapsed) {
            case 15:
                $countdown.hide();
                break;
        }

        switch (secondsRemaining) {
            case 60:
                $countdown.show();
                break;
        }
    })
    .on('finish.countdown', function (e) {
        setTimeout(function () {
            alert('boom');
        });
    });
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41168907

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档