Pulkstens un taimeris – WEB programmēšana

Izmantoju funkciju setInterval(), ar kuras palīdzību ik pēc sekundes izsaucu sevis definētu funkciju.

<div id="clock"></div>
    <script>
        let s = 0;
    setInterval(myFunction, 1000);
    function myFunction(){
        s++;
        document.getElementById('clock').innerHTML = s;
    }
    </script>

Piemērs ar taimeri, kas atskaita no 10 līdz 0 un sprāgst.

<div id="clock"></div>
    <script>
    let s = 10;
    setInterval(myFunction, 1000);   
    
    function myFunction(){
        if(s==0) {
            document.getElementById('clock').innerHTML = 'Sprādziens!!!';
            return;
        }
        s--;
        document.getElementById('clock').innerHTML = s;
    }
    </script>

Pēdējās 3 sekundes parādās sarkanas un bold. Tas tiek panākt pievienojot klasi ar element.classList.add(‘big’)

<style>
.big {font-weight: bold; color: red;}
</style>
<body>
    <div id="clock"></div>
    <script>
    let s = 10;
    setInterval(myFunction, 1000);   
    
    function myFunction(){
        if(s==0) {
            document.getElementById('clock').innerHTML = 'Sprādziens!!!';
            return;
        }
        s--;
        if(s<4) {
            document.getElementById('clock').classList.add('big');
        }
        document.getElementById('clock').innerHTML = s;
    }
    </script>
</body>