I need a countdown timer that can get start time(minute) from input and start it after clicking start button It also should have pause/play button I've been searching and just found some count down that get a date in theyr function
1
-
1What have you tried so far? Please write your code here.Mathemagician– Mathemagician2019-06-29 18:32:14 +00:00Commented Jun 29, 2019 at 18:32
Add a comment
|
2 Answers
so i found something from jsfiddle in here
$(document).ready(function() {
(function($){
$.extend({
APP : {
formatTimer : function(a) {
if (a < 10) {
a = '0' + a;
}
return a;
},
startTimer : function(dir) {
var a;
// save type
$.APP.dir = dir;
// get current date
$.APP.d1 = new Date();
switch($.APP.state) {
case 'pause' :
// resume timer
// get current timestamp (for calculations) and
// substract time difference between pause and now
$.APP.t1 = $.APP.d1.getTime() - $.APP.td;
break;
default :
// get current timestamp (for calculations)
$.APP.t1 = $.APP.d1.getTime();
// if countdown add ms based on seconds in textfield
if ($.APP.dir === 'cd') {
$.APP.t1 += parseInt($('#cd_seconds').val())*1000;
}
break;
}
// reset state
$.APP.state = 'alive';
$('#' + $.APP.dir + '_status').html('Running');
// start loop
$.APP.loopTimer();
},
pauseTimer : function() {
// save timestamp of pause
$.APP.dp = new Date();
$.APP.tp = $.APP.dp.getTime();
// save elapsed time (until pause)
$.APP.td = $.APP.tp - $.APP.t1;
// change button value
$('#' + $.APP.dir + '_start').val('Resume');
// set state
$.APP.state = 'pause';
$('#' + $.APP.dir + '_status').html('Paused');
},
stopTimer : function() {
// change button value
$('#' + $.APP.dir + '_start').val('Restart');
// set state
$.APP.state = 'stop';
$('#' + $.APP.dir + '_status').html('Stopped');
},
resetTimer : function() {
// reset display
$('#' + $.APP.dir + '_ms,#' + $.APP.dir + '_s,#' + $.APP.dir + '_m,#' + $.APP.dir + '_h').html('00');
// change button value
$('#' + $.APP.dir + '_start').val('Start');
// set state
$.APP.state = 'reset';
$('#' + $.APP.dir + '_status').html('Reset & Idle again');
},
endTimer : function(callback) {
// change button value
$('#' + $.APP.dir + '_start').val('Restart');
// set state
$.APP.state = 'end';
// invoke callback
if (typeof callback === 'function') {
callback();
}
},
loopTimer : function() {
var td;
var d2,t2;
var ms = 0;
var s = 0;
var m = 0;
var h = 0;
if ($.APP.state === 'alive') {
// get current date and convert it into
// timestamp for calculations
d2 = new Date();
t2 = d2.getTime();
// calculate time difference between
// initial and current timestamp
if ($.APP.dir === 'sw') {
td = t2 - $.APP.t1;
// reversed if countdown
} else {
td = $.APP.t1 - t2;
if (td <= 0) {
// if time difference is 0 end countdown
$.APP.endTimer(function(){
$.APP.resetTimer();
$('#' + $.APP.dir + '_status').html('Ended & Reset');
});
}
}
// calculate milliseconds
ms = td%1000;
if (ms < 1) {
ms = 0;
} else {
// calculate seconds
s = (td-ms)/1000;
if (s < 1) {
s = 0;
} else {
// calculate minutes
var m = (s-(s%60))/60;
if (m < 1) {
m = 0;
} else {
// calculate hours
var h = (m-(m%60))/60;
if (h < 1) {
h = 0;
}
}
}
}
// substract elapsed minutes & hours
ms = Math.round(ms/100);
s = s-(m*60);
m = m-(h*60);
// update display
$('#' + $.APP.dir + '_ms').html($.APP.formatTimer(ms));
$('#' + $.APP.dir + '_s').html($.APP.formatTimer(s));
$('#' + $.APP.dir + '_m').html($.APP.formatTimer(m));
$('#' + $.APP.dir + '_h').html($.APP.formatTimer(h));
// loop
$.APP.t = setTimeout($.APP.loopTimer,1);
} else {
// kill loop
clearTimeout($.APP.t);
return true;
}
}
}
});
$('#sw_start').on('click', function() {
$.APP.startTimer('sw');
});
$('#cd_start').on('click', function() {
$.APP.startTimer('cd');
});
$('#sw_stop,#cd_stop').on('click', function() {
$.APP.stopTimer();
});
$('#sw_reset,#cd_reset').on('click', function() {
$.APP.resetTimer();
});
$('#sw_pause,#cd_pause').on('click', function() {
$.APP.pauseTimer();
});
})(jQuery);
});input {
padding:4px;}
input[type="text"] {
width:50px;
text-align:center;}
div {
font-family:Arial,Verdana;
font-size:12px;
width:360px;
background-color:#f2f2f2;
padding:16px;
border:solid 1px #e5e5e5;
text-align:center;
margin:0 0 16px 0;}
div span:last-child {
color:green;}
h1 {
font-size:14px;
margin:0 0 8px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
<h1>Stopwatch</h1>
<span id="sw_h">00</span>:
<span id="sw_m">00</span>:
<span id="sw_s">00</span>:
<span id="sw_ms">00</span>
<br/>
<br/>
<input type="button" value="Start" id="sw_start" />
<input type="button" value="Pause" id="sw_pause" />
<input type="button" value="Stop" id="sw_stop" />
<input type="button" value="Reset" id="sw_reset" />
<br/>
<br/>
<span id="sw_status">Idle</span>
</div>
<div>
Don't run them at the same time ... it's a demo :-)
</div>
<div>
<h1>Countdown</h1>
<span id="cd_h">00</span>:
<span id="cd_m">00</span>:
<span id="cd_s">00</span>:
<span id="cd_ms">00</span>
<br/>
<br/>
<input type="button" value="Start" id="cd_start" />
<input type="button" value="Pause" id="cd_pause" />
<input type="button" value="Stop" id="cd_stop" />
<input type="button" value="Reset" id="cd_reset" />
<br/>
<br/>
<input type="text" value="15" id="cd_seconds" />
secs
<br/>
<br/>
<span id="cd_status">Idle</span>
</div>hope it helps
Comments
I guess you need something similar to stopwatch plugin. Look at these plugins.
https://www.jqueryscript.net/tags.php?/stopwatch/
They have set time,play and resume controls.
I hope it will help you