How to show timer using jQuery

February 16, 2023

i have some jQuery code that not worked, i mean i want to show the number var in p tag but not worked, first i want to make p tag with number id then put var number in p tag then remove it, like a timer that show 60 and every second it will be less: 60 59 58 …

HTML and jQuery:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<script>
    const MyTimer = setInterval(timer, 1000);
    var number = 60;

    function timer() {
        if (number === 1) {
            clearInterval(MyTimer);
        }

        const p = $('&lt;p&gt;', {
            id: 'number'
        });
        $('body').append(p);

        number -= 1;

        $('#number').html(number);

        $('#number').remove();

    }

    const myTimeout = setTimeout(response, 61000);

    function response() {
        alert("timer is out");
    }
</script>

</head>

<body>

</body>

</html>

>Solution :

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      var number = 60;
      const MyTimer = setInterval(timer, 1000);

      function timer() {
        if (number === 1) {
          clearInterval(MyTimer);
        }

        const p = $('<p>', { id: 'number' });
        $('body').append(p);

        $('#number').html(number);

        number -= 1;

        setTimeout(function() {
          $('#number').remove();
        }, 900);
      }

      const myTimeout = setTimeout(response, 61000);

      function response() {
        alert('timer is out');
      }
    </script>
  </head>
  <body>
  </body>
</html>