I already check the answer from here and so how can I make it for multiple data. In order for me to set a timer for a specific service for example. So here is my script.
<script type="text/javascript">
//var minutes2 = currentTime.setMinutes(currentTime.getMinutes() + 30);
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes*60000);
}
var dat = new Date();
//var tim = addMinutes(dat, 15);
//console.log(tim);
function fixIntegers(integer)
{
if (integer < 0)
integer = 0;
if (integer < 10)
return "0" + integer;
return "" + integer;
}
$(function () {
$('.btn-start-timer').click(function(){
var i = window.setInterval(function(){
var future = addMinutes(dat, 60);
//var future = new Date("Dec 12 2013 22:10:00 GMT-0800 (Pacific Standard Time) ");
var now = new Date();
//console.log(tim);
var difference = Math.floor((future.getTime() - now.getTime()) / 1000);
var seconds = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var minutes = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var hours = fixIntegers(difference % 24);
difference = Math.floor(difference / 24);
var days = difference;
/* $(this).parent().parent().find('.timer #seconds').text(seconds + "s");
$(this).parent().parent().find('.timer #minutes').text(minutes + "m");
$(this).parent().parent().find('.timer #hours').text(hours + "h");
$(this).parent().parent().find('.timer #days').text(days + "d");*/
$(".timer #seconds").text(seconds + "s");
$(".timer #minutes").text(minutes + "m");
$(".timer #hours").text(hours + "h");
$(".timer #days").text(days + "d");
if(hours == 0 && minutes == 0 && seconds == 0){
window.clearInterval( i );
alert('times up');
}
}, 1000);
});
});
</script>
And here is my the html:
<table cellpadding="10">
<tr>
<th>Timer</th>
<th> </th>
</tr>
<tr>
<td class="timer">
<span id="days"></span>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
</td>
<td><button type="button" class="btn-start-timer">Start Now</button></td>
</tr>
<tr>
<td class="timer">
<span id="days"></span>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
</td>
<td><button type="button" class="btn-start-timer">Start Now</button></td>
</tr>
</table>
How can I make the time not to reset once it is started?