Custom Counter js

 

URL:-

https://jsfiddle.net/pawangupta18/1uqd635L/4/

Html:-

<div class="container">

<div id="time">

    <span class="digit" id="hr">00</span>

    <span class="txt">Hr</span>

    <span class="digit" id="min">00</span>

    <span class="txt">Min</span>

    <span class="digit" id="sec">00</span>

    <span class="txt">Sec</span>

    <span class="digit" id="count">00</span>

</div>

<div id="btn-container">

    <button class="btn" id="start" onclick="start()">Start</button>

    <button class="btn" id="stop" onclick="stop()">Stop</button>

    <button class="btn" id="reset" onclick="reset()">Reset</button>

</div>      

</div>

Css:-

*{margin: 0px; padding: 0px; list-style: none; box-sizing: border-box;}

body{margin: 0px; padding: 0px; list-style: none; height: 100vh; background-color: #2c3e50;}    

.container{ width: 1270px; margin: 0 auto; color: #d7dfe4;}

.digit{font-size: 150px; font-weight: bold;}

.text{font-size: 40px; font-weight: bold;}

#btn-container{text-align: center; margin-top: 40px;}

.btn{ padding: 7px 35px; font-size: 15px;  margin: 0 10px; color: #fff; border: none; cursor: pointer;}    

#time {text-align: center;} 

#start{background-color: #1abc9c;}

#stop{background-color: #3498db;}

#reset{background-color: #e74c3c;}

    

JS:-

<script>

    

var hr = 0;

var min = 0;

var sec = 0;

var count = 0;

    

var time = false;

    

function start(){

    time = true;

    stopwatch();

}   

    

function stop(){

    time = false;

}   

    

function reset(){

  time = false;  

    hr = 0;

    min = 0;

    sec = 0;

    count = 0;

    document.getElementById("hr").innerHTML = "00";

    document.getElementById("min").innerHTML = "00";

    document.getElementById("sec").innerHTML = "00";

    document.getElementById("count").innerHTML = "00";

    

}    

   

function stopwatch(){

if(time == true){

    count = count+1;

    if(count == 100){

        sec = sec+1;

        count = 0;

    }

    

if(sec == 60){

    min = min+1;

    sec = 0;

}    

if(min == 60){

    hr = hr+1;

    min = 0;

    sec = 0;

}    

    

    var hrstring = hr;

    var minstring = min;

    var secstring = sec;

    var countstring = count;

    

    if(hr < 10){

        hrstring = "0" + hrstring; 

    }

    if(min < 10){

        minstring = "0" + minstring; 

    }

    

    if(sec < 10){

        secstring = "0" + secstring; 

    }

    

    if(count < 10){

        countstring = "0" + countstring; 

    }

    

    

    document.getElementById("hr").innerHTML = hrstring;

    document.getElementById("min").innerHTML = minstring;

    document.getElementById("sec").innerHTML = secstring;

    document.getElementById("count").innerHTML = countstring;

    setTimeout ("stopwatch()", 10)

 }   

} 

    

</script>