39
I'm using Bootstrap cdn For Basic CSS
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- -->
<div class="container">
<div class="card">
<div class="card-body">
<div class="timerDisplay">
00 : 00 : 00 : 000
</div>
<div class="row justify-content-center">
<div class="col-4">
<button type="button" class="btn btn-outline-primary m-auto" id="startTimer">Play</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-outline-secondary m-auto" id="pauseTimer">Pause</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-outline-danger" id="resetTimer">Reset</button>
</div>
</div>
</div>
</div>
</div>
body{
background-color: #f5f5f7;
}
.container{
/* width: 500px !important; */
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.timerDisplay{
position: relative;
text-align: center;
background: #ffffff;
padding: 20px 0;
font-size: 25px;
font-family: 'Roboto mono',monospace;
}
let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.timerDisplay');
let int = null;
document.getElementById('startTimer').addEventListener('click', ()=>{
if(int!==null){
clearInterval(int);
}
int = setInterval(displayTimer,10);
});
document.getElementById('pauseTimer').addEventListener('click', ()=>{
clearInterval(int);
});
document.getElementById('resetTimer').addEventListener('click', ()=>{
clearInterval(int);
[milliseconds,seconds,minutes,hours] = [0,0,0,0];
timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});
function displayTimer(){
milliseconds+=10;
if(milliseconds == 1000){
milliseconds = 0;
seconds++;
if(seconds == 60){
seconds = 0;
minutes++;
if(minutes == 60){
minutes = 0;
hours++;
}
}
}
let h = hours < 10 ? "0" + hours : hours;
let m = minutes < 10 ? "0" + minutes : minutes;
let s = seconds < 10 ? "0" + seconds : seconds;
let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;
timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}
CSS hover effects allow elements to load quickly. Most web designers prefer CSS animations as they are easy to employ.