Test Timer
HTML
<div>Delay (in seconds): <input type="text" id="txtSeconds" value="10" /></div>
<a class="addTimer">Add Timer</a> | Timer count: <span class="timerCount">0</span><span class="info"></span>
<div class="container">
</div>
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;*/
}
#txtSeconds {
width:40px;
text-align:right;
}
JavaScript
function get_elapsed_time_string(total_seconds) {
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var days = Math.floor(total_seconds / 86400);
total_seconds = total_seconds % 86400;
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 = days + ":" +hours + ":" + minutes + ":" + seconds;
return currentTimeString;
}
$(function() {
var timer = null;
var timerCount = 0;
$(".addTimer").click(function(e) {
var seconds = $("#txtSeconds").val();
$("<hr /><div class=\"timer\" data-remaining=\"" + seconds + "\" data-expired=\"0\"><div class=\"clock\">"+ get_elapsed_time_string(seconds) + "</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",...