html - how to resume and pause a timer using one button in javascript? -


i want create timer pause , resume in 1 button in javascript... timer working fine.pause , resume working fine if 2 different button.but if make single button resume not happening .need help...

javascript:

paused = false;  // set minutes var mins = 30;  // calculate seconds  var secs = mins * 60; var t = 0;  function countdown() {     t = settimeout('decrement()', 1000); }  function decrement() {     if (document.getelementbyid) {         minutes = document.getelementbyid("minutes");         seconds = document.getelementbyid("seconds");         // if less minute remaining         if (seconds < 59) {             seconds.value = secs;           } else {             minutes.value = getminutes();             seconds.value = getseconds();         }         secs--;         t = settimeout('decrement()', 1000);     } }  function getminutes() {     // minutes seconds divided 60, rounded down     mins = math.floor(secs / 60);     return mins; }  function getseconds() {     // take mins remaining (as seconds) away total seconds remaining     return secs - math.round(mins * 60); }  function pause() {     cleartimeout(t);     document.getelementbyid('pause').value = "resume";     document.getelementbyid("pause").onclick = resume(); }  function resume() {     t = settimeout(); } 

html:

<head>     <title>countdown</title>     <script src='myscript'></script> </head>  <body>     <div id="timer">         <input id="minutes" style="width: 24px; border: none; background-color:none;>mts    <input id=" seconds "  style="width: 26px; border: none; background-color:none;>second         <div id="timer">             <input type="button" id="pause" value="pause" onclick="pause();" />         </div>     </div>     <script>         countdown();     </script>     </head> 

problem in resume function

it should that

try code

<html> <head> <title>countdown</title> <script type="text/javascript"> paused = false; // set minutes var mins = 30; // calculate seconds  var secs = mins * 60; var t=0;   var flagtimer='resume'; function countdown() {     t = settimeout('decrement()',1000); } function decrement() {     if (document.getelementbyid) {         minutes = document.getelementbyid("minutes");         seconds = document.getelementbyid("seconds");         // if less minute remaining         if (seconds < 59) {             seconds.value = secs;         } else {             minutes.value = getminutes();             seconds.value = getseconds();         }         secs--;         t= settimeout('decrement()',1000);     } } function getminutes() {     // minutes seconds divided 60, rounded down     mins = math.floor(secs / 60);     return mins; } function getseconds() {     // take mins remaining (as seconds) away total seconds remaining     return secs-math.round(mins *60); } function pause() {    if( flagtimer=='resume')   {     cleartimeout(t);     t=0;alert(' 12c  ya');     document.getelementbyid('pause').value="resume";     flagtimer='pause';   }   else   {     flagtimer='resume';     document.getelementbyid('pause').value="pause";     resume();   }  } function resume() {     t= settimeout('decrement()',1000); }  </script> </head> <body>     <div id="timer">         <input id="minutes"  style="width: 24px; border: none; background-color:none;">mts         <input id="seconds"  style="width: 26px; border: none; background-color:none;"/>second         <div id="timer">             <input type="button" id="pause" value="pause" onclick="pause();" />         </div>     </div>     <script>         countdown();     </script> </body> </html> 

live test http://jsbin.com/ajegas/8

fiddle http://jsfiddle.net/hb5e9/1/


Comments