html
----------
<div id="countdown">
<span> 10 </span>Minutes
<span> 10 </span>Seconds <br>
<inputtype="button"value="Start">
</div>
css
----------
#countdown{width: 300px;text-align: center;background:;margin:30px auto;border:2px dashed blue;padding: 10px;}
input{width: 100px;height: 50px;cursor: pointer; margin: 10px;}
span{color:#000;width:80px;background:#fbfbfb;border:2px solid #b4b4b4;margin:10px;padding:0 10px;}
input.cancel{background-position:0 -50px;}
js
----------
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null;
aInput.onclick = function ()
{
//console.log(this.className);
if(this.className==='')
{
timer=setInterval(updateTime,1000);
}
else{clearInterval(timer);}
// this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
// to ensure the button works both for start and stop and also have cancel className
if (this.className==='')
{this.className='cancel'}else{this.className=''}
//this.className = this.className === '' ? this.className="cancel" : '';
};
function updateTime()
{
var aSpan = oCountDown.getElementsByTagName("span");
//oRemain is the total seconds
var oRemain = aSpan[0].innerHTML * 60 + parseInt(aSpan[1].innerHTML);
// The parseInt function converts its first argument to a string, parses it, and returns an integer or NaN.
// close the timer,so it stops at 00 Minutes 00 seconds
if (oRemain <= 0)
{
clearInterval(timer); return
}
else
{
oRemain--;
}
aSpan[0].innerHTML=format(parseInt(oRemain/60));
oRemain %=60;
aSpan[1].innerHTML=format(parseInt(oRemain)); }
function format(a)
{
//The toString() method converts a number to a string.
return a.toString();
}