Problem re-factoring multiple timer countdown
I create my multiple timer countdown from easy or simple script. entire code
The problem's happen when i want to add timer countdown again
i have to declare variable current_total_second
CODE:
elapsed_seconds= tampilkan("#time1");
and variable timer who set with setInterval..
timer= setInterval(function() {
if (elapsed_seconds != 0){
elapsed_seconds = elapsed_seconds - 1;
$('#time1').text(开发者_运维技巧get_elapsed_time_string(elapsed_seconds))
}else{
$('#time1').parent().slideUp('slow', function(){
$(this).find('.post').text("Post has been deleted");
})
$('#time1').parent().slideDown('slow');
clearInterval(timer);
}
}, 1000);
i've already know about re-factoring and try different way but i'm stack to re-factoring this code i want implement flexibelity to it.. when i add more of timer countdown.. script do it automatically or dynamically without i have to add a bunch of code.. and the code become clear and more efficient.
Thanks in Advance
It's probably more efficient using a single timer like so...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
padding: 10%;
}
hr {
margin: 0px;
padding: 0px;
height: 6px;
background: black;
}
.clock {
margin: 0px;
padding: 8px 8px;
background-color: whitesmoke;
color: red;
}
.post {
margin: 0px;
padding: 8px 8px;
background: white;
/*border-bottom: 4px solid black;*/
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<a class="addTimer">Add Timer</a> | Timer count: <span class="timerCount">0</span><span class="info"></span>
<div class="container">
</div>
</body>
<script type="text/javascript">
function get_elapsed_time_string(total_seconds) {
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var hours = Math.floor(total_seconds / 3600);
total_seconds = total_seconds % 3600;
var minutes = Math.floor(total_seconds / 60);
total_seconds = total_seconds % 60;
var seconds = Math.floor(total_seconds);
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
var currentTimeString = hours + ":" + minutes + ":" + seconds;
return currentTimeString;
}
$(function() {
var timer = null;
var timerCount = 0;
$(".addTimer").click(function(e) {
$("<hr /><div class=\"timer\" data-remaining=\"10\" data-expired=\"0\"><div class=\"clock\">00:00:10</div><div class=\"post\">Lorem Ipsum</div></div>").appendTo($(".container"));
timerCount++;
$(".timerCount").text(timerCount);
if (timer === null) {
$(".info").text(" | ticker created");
timer = setInterval(function() {
$(".container > .timer").each(function() {
var remainingSeconds = parseInt($(this).attr("data-remaining"), 10);
if (remainingSeconds > 1) {
remainingSeconds--;
$(this).attr("data-remaining", remainingSeconds);
$(this).find(".clock").text(get_elapsed_time_string(remainingSeconds));
} else {
if ($(this).attr("data-expired") === "0") {
remainingSeconds--;
$(this).attr("data-remaining", remainingSeconds);
$(this).find(".clock").text(get_elapsed_time_string(remainingSeconds));
$(this).slideUp("slow", function() {
$(this).find(".post").text("Post has been deleted");
$(this).slideDown("slow");
$(this).attr("data-expired", "1");
timerCount--;
$(".timerCount").text(timerCount);
if (timerCount === 0) {
$(".info").text(" | ticker destroyed");
clearInterval(timer);
timer = null;
}
});
}
}
});
}, 1000);
} else {
$(".info").text(" | using existing ticker");
}
});
});
</script>
</html>
In this code,I only have 1 ticker running at all time (only 1 setInterval) and using data- attribute to keep track of how many seconds left for each timer and if the timer has expired. In this way, I can add as many timer as I want since all the necessary metadata about the timer is in the timer itself.
On each tick, I'll just go through each existing timer, inspect its data-remaining attribute and update the timer div accordingly. if it expires, then do your animation. When all the timers are done, clean up the interval.
Give it a try...
加载中,请稍侯......
精彩评论