[英]Jquery multiple divs countup timer. One ends and next one starts and so on
In Jquery I want to create multilevel level wise COUNT-UP Timer在 Jquery 中,我想创建多级明智的 COUNT-UP 计时器
For example timer for 1st div ends and timer for next div starts and so on till last div...例如,第一个 div 的计时器结束,下一个 div 的计时器开始,依此类推,直到最后一个 div...
Main requirements.主要要求。
Following sample code demo works fine for 1st DIV but not working next all DIVs以下示例代码演示适用于第一个 DIV,但不适用于所有 DIV
Following is my HTMLCODE for multiple DIVs.以下是我的多个 DIV 的 HTMLCODE。 Where I want to show time up counter for example 00:01 => 00:02 => .. => 00:60 =
我想显示时间计数器的地方,例如 00:01 => 00:02 => .. => 00:60 =
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div_1"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_2"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_3"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <script type="text/javascript"> var totalSeconds = 0; var div_1 = "div_1"; var timer_1_start = 0; var timer_1_limit = 05; var div_2 = "div_2"; var timer_2_start = 05; var timer_2_limit = 10; var div_3 = "div_3"; var timer_3_start = 10; var timer_3_limit = 20; var div_1_pointer = setInterval( function(){ console.log(' ------> Inner function to setInterval for '+div_1); w3n_setTime(div_1,div_1_pointer,timer_1_start,timer_1_limit); }, 1000 ); /* var div_2_pointer = setInterval( function(){ console.log(' ------> Inner function to setInterval for '+div_1); w3n_setTime(div_2,div_2_pointer,timer_2_start,timer_2_limit); }, 1000 ); */ function w3n_setTime(div_id,div_pointer,timer_start,timer_limit){ // console.log(" total mins ==> "+pad(parseInt(totalSeconds / 60)) ); // console.log(" total seconds ==============> "+pad(totalSeconds % 60)); if(parseInt(pad(totalSeconds % 60)) === parseInt(timer_limit)){ console.log(" Timer complete for "+div_id); clearInterval(div_pointer); $('#'+div_id+' div#done').html("Done"); } ++totalSeconds; //secondsLabel.innerHTML = pad(totalSeconds % 60); //minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60)); $('#'+div_id+' span#seconds').text(pad(totalSeconds % 60)); $('#'+div_id+' span#minutes').text(pad(parseInt(totalSeconds / 60))); } function pad(val) { var valString = val + ""; if (valString.length < 2) { return "0" + valString; } else { return valString; } } </script>
01:01
01:01
<div id="div_1">
<span id="minutes">00</span>:<span id="seconds">00</span>
<div id="done"></div>
</div>
<hr/>
<div id="div_2">
<span id="minutes">00</span>:<span id="seconds">00</span>
<div id="done"></div>
</div>
<hr/>
<div id="div_3">
<span id="minutes">00</span>:<span id="seconds">00</span>
<div id="done"></div>
</div>
Jquery/JavaScript Code Jquery/JavaScript 代码
var totalSeconds = 0;
var div_1 = "div_1";
var timer_1_start = 0;
var timer_1_limit = 05;
var div_2 = "div_2";
var timer_2_start = 05;
var timer_2_limit = 10;
var div_3 = "div_3";
var timer_3_start = 10;
var timer_3_limit = 20;
var div_1_pointer =
setInterval(
function(){
console.log(' ------> Inner function to setInterval for '+div_1);
w3n_setTime(div_1,div_1_pointer,timer_1_start,timer_1_limit);
},
1000 );
/*
var div_2_pointer =
setInterval(
function(){
console.log(' ------> Inner function to setInterval for '+div_1);
w3n_setTime(div_2,div_2_pointer,timer_2_start,timer_2_limit);
},
1000 );
*/
function w3n_setTime(div_id,div_pointer,timer_start,timer_limit){
// console.log(" total mins ==> "+pad(parseInt(totalSeconds / 60)) );
// console.log(" total seconds ==============> "+pad(totalSeconds % 60));
if(parseInt(pad(totalSeconds % 60)) === parseInt(timer_limit)){
console.log(" Timer complete for "+div_id);
clearInterval(div_pointer);
$('#'+div_id+' div#done').html("Done");
}
++totalSeconds;
//secondsLabel.innerHTML = pad(totalSeconds % 60);
//minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
$('#'+div_id+' span#seconds').text(pad(totalSeconds % 60));
$('#'+div_id+' span#minutes').text(pad(parseInt(totalSeconds / 60)));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
Issue : I am able to make code work for one DIV only and not for all.问题:我可以让代码只对一个 DIV 起作用,而不能对所有的 DIV 起作用。
Try following code.尝试以下代码。
I have modified code to match your requirements.我已经修改了代码以满足您的要求。 It has only 1 function which will work for all your main DIV.
它只有 1 个适用于所有主 DIV 的功能。 You have to count and mention length of your DIVs in starting.
您必须在开始时计算并提及 DIV 的长度。
Let me know if this works for you.让我知道这是否适合您。
var totalSeconds = 0; var game_timer = Array(1,1,1); // time in mins var game_level = 1; // for start level var div_pointer = setInterval( function(){ var c = game_timer.length; // total game level if(parseInt(pad(totalSeconds / 60)) == game_timer[game_level-1]) { $('#div_'+game_level+' div#done').html("Done"); game_level ++; totalSeconds=0; } if(game_level==c && parseInt(pad(totalSeconds / 60)) === parseInt(game_timer[c-1])){ clearInterval(div_pointer); } ++totalSeconds; $('#div_'+game_level+' span#seconds').text(pad(totalSeconds % 60)); $('#div_'+game_level+' span#minutes').text(pad(parseInt(totalSeconds / 60))); }, 1000 ); function pad(val) { var valString = val + ""; if (valString.length < 2) { return "0" + valString; } else { return valString; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div_1"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_2"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_3"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.