我有一个简单的要求。
显示页面时，页面右下方会显示从30分钟开始的倒计时。 15秒后隐藏倒计时。 到期前1分钟，倒计时再次显示直至结束。到期时，会显示一条javascript警报，告诉用户时间到了。
$("#divCountdown") .countdown(timeToExpire, function (event) { $(this).text( event.strftime('%M:%S') ); //15 seconds later do something //1740 seconds later, i.e. 29 minutes, do something //1800 seconds later, i.e. 30 minutes, do something })上面的代码允许我显示倒计时。 在倒计时进行过程中有没有办法进行回调？ 15秒后的第一个，以便我可以隐藏显示倒计时的div，到期前1分钟，再次显示，最后显示JavaScript弹出窗口？
Thansk的帮助
I've a simple requirement.
When a page displays, a countdown starting from 30 minutes is displayed at the bottom-right of the page. The countdown is hidden after 15 seconds. 1 minutes before the expiration, the countdown is displayed again till the end.At the expiration, a javascript alert is displayed to tell the user the time is up.
$("#divCountdown") .countdown(timeToExpire, function (event) { $(this).text( event.strftime('%M:%S') ); //15 seconds later do something //1740 seconds later, i.e. 29 minutes, do something //1800 seconds later, i.e. 30 minutes, do something })The above code allows me to display the countdown. Is there a way to make callbacks while the countdown is going on? The first one after 15 seconds so that I can hide the div that displays the countdown, 1 minute before the expiration, display it again, and at the end, display the JavaScript popup?
Thansk for helping
最满意答案
我将假设您已经知道如何隐藏，显示或更改HTML标记的内部文本，并且它已经位于HTML的正确位置。 让我们关注倒计时应如何工作：
$(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 = setTimeout(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); });编辑：
这里描述的相同逻辑可以与您打算使用的插件一起使用，请看一下这个例子。
I will assume that you already know how to hide, show or change the inner text of an HTML tag and that it is already in the correct place of your HTML. Let us focus on how the countdown should work:
$(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 = setTimeout(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); });EDIT:
The same logic as described here can be used with the plugin you intend to use, take a look at this example.
更多推荐
发布评论