├── index.html ├── style.css └── app.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stopwatch 8 | 9 | 10 | 11 | 12 |
13 |
14 |

00

  : 15 |

00

  : 16 |

00

 : 17 |

00

18 |
19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: none; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | background-color: rgb(0, 102, 255); 7 | } 8 | 9 | .h00 { 10 | font-size: 35px; 11 | display: inline-block; 12 | padding: 5px; 13 | color: blue; 14 | font-family: sans-serif; 15 | } 16 | 17 | .colon { 18 | font-size: 50px; 19 | color: blue; 20 | } 21 | 22 | .main { 23 | background-color: white; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | flex-direction: column; 28 | padding: 15px; 29 | border: none; 30 | border-radius: 10px; 31 | position: relative; 32 | top: 175px; 33 | } 34 | 35 | .h1span { 36 | text-align: center; 37 | border: none; 38 | } 39 | 40 | .divbtn { 41 | display: flex; 42 | justify-content: space-between; 43 | } 44 | 45 | button { 46 | border: none; 47 | margin: 11px; 48 | padding: 6px; 49 | width: 80px; 50 | } 51 | 52 | .resetbtn { 53 | background-color: rgb(160, 12, 12); 54 | color: white; 55 | } 56 | 57 | #startbtn { 58 | background-color: rgb(0, 165, 0); 59 | color: white; 60 | } 61 | 62 | .pausebtn { 63 | background-color: rgb(25, 63, 167); 64 | color: white; 65 | 66 | } 67 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let hours = 0; 2 | let min = 0; 3 | let sec = 0; 4 | let msec = 0; 5 | 6 | let gethours = document.getElementById('hours'); 7 | let getmin = document.getElementById('min'); 8 | let getsec = document.getElementById('sec'); 9 | let getmsec = document.getElementById('msec'); 10 | 11 | let interval; 12 | 13 | function startbtn() { 14 | interval = setInterval(function () { 15 | msec++; 16 | getmsec.innerHTML = msec; 17 | 18 | if (msec > 100) { 19 | sec++; 20 | getsec.innerHTML = sec; 21 | msec = 0; 22 | } 23 | 24 | else if (sec >= 59) { 25 | min++; 26 | getmin.innerHTML = min; 27 | sec = 0; 28 | } 29 | 30 | else if (min >= 59) { 31 | hours++; 32 | gethours.innerHTML = hours; 33 | min = 0; 34 | } 35 | 36 | }, 10) 37 | document.getElementById('startbtn').disabled = true; 38 | } 39 | 40 | function stop() { 41 | clearInterval(interval); 42 | document.getElementById('startbtn').disabled = false; 43 | } 44 | 45 | function reset() { 46 | 47 | hours = 0; 48 | min = 0; 49 | sec = 0; 50 | msec = 0; 51 | 52 | gethours.innerHTML = hours + '0'; 53 | getmin.innerHTML = min + "0"; 54 | getsec.innerHTML = sec + "0"; 55 | getmsec.innerHTML = msec + "0"; 56 | } 57 | --------------------------------------------------------------------------------