Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cronometer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .cronometer {
            text-align: center;
        }
        .time {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .buttons button {
            font-size: 1em;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
        #fillim{
            background-color:green;
        }
        #mbarim{
            background-color:red;
        }
         #reseto{
            background-color:yellow;
        }
    </style>
</head>
<body>

<div class="cronometer">
    <div class="time" id="display">00 oret : 00 minutat : 00 sekondat</div>
    <div class="buttons">
        <button onclick="start()" id="fillim">Start</button>
        <button onclick="stop()" id="mbarim">Stop</button>
        <button onclick="reset()" id='reseto'>Reset</button>
    </div>
</div>

<script>
    let startTime;
    let updatedTime;
    let difference;
    let tInterval;
    let running = false;
    let resetTime = true;

    function start() {
        if (!running) {
            startTime = new Date().getTime();
            tInterval = setInterval(getShowTime, 1);
            resetTime = false;
            running = true;
        }
    }

    function stop() {
        if (running) {
            clearInterval(tInterval);
            running = false;
        }
    }

    function reset() {
        clearInterval(tInterval);
        document.getElementById('display').innerHTML = "00 oret : 00 minutat : 00 sekondat";
        resetTime = true;
        running = false;
    }

    function getShowTime() {
        updatedTime = new Date().getTime();
        difference = updatedTime - startTime;

        let oret = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutat = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        let sekondat = Math.floor((difference % (1000 * 60)) / 1000);

        oret = (oret < 10) ? "0" + oret : oret;
        minutat = (minutat < 10) ? "0" + minutat : minutat;
        sekondat = (sekondat < 10) ? "0" + sekondat : sekondat;

        document.getElementById('display').innerHTML = oret + ' oret : ' + minutat + ' minutat : ' + sekondat + ' sekondat';
    }
</script>

</body>
</html>
Editor is loading...