Display new timer on button click in JavaScript using Moment.js

Viewed 248

I made a timer using Moment.js and it works perfectly fine but I have one issue that I can't seem to solve. I made a button and I want to display my new timer when I click the button, I don't know what piece of code to add to make it work. What am I missing?

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment.min.js"></script>
    </head>
    <body>
  <!-- make div to display timmer -->
    <div class="countdown"></div>
  <button >click</button>
  <p></p>
    </body>
    </html>
  
   
    <script type="text/javascript">
      var duration = moment.duration({
        "minutes": 1,
        "seconds": 00
  
      });
  //    moments.js 
      var timestamp = new Date(0, 0, 0, 2, 10, 30);
      var interval = 1;
      var timer = setInterval(function() {
        timestamp = new Date(timestamp.getTime() + interval * 1000);
  
        duration = moment.duration(duration.asSeconds() - interval, "seconds");
        var min = duration.minutes();
        var sec = duration.seconds();
 
  
        sec -= 1;
        if (min < 0) return clearInterval(timer);
        if (min < 10 && min.length != 2) min = "0" + min;
        if (sec < 0 && min != 0) {
          min -= 1;
          sec = 59;
        } else if (sec < 10 && sec.length != 2) sec = "0" + sec;


       
        $("p").text(min + ":" + sec);
        if (min == 0 && sec == 0)
          clearInterval(timer);
  
  
      }, 1000);
  
  </script>
1 Answers

If i understood well, You can put it inside a function and call it on button click.

var startTimer = function(){
      var duration = moment.duration({
        "minutes": 1,
        "seconds": 00
  
      });
  //    moments.js 
      var timestamp = new Date(0, 0, 0, 2, 10, 30);
      var interval = 1;
      var timer = setInterval(function() {
        timestamp = new Date(timestamp.getTime() + interval * 1000);
  
        duration = moment.duration(duration.asSeconds() - interval, "seconds");
        var min = duration.minutes();
        var sec = duration.seconds();
 
  
        sec -= 1;
        if (min < 0) return clearInterval(timer);
        if (min < 10 && min.length != 2) min = "0" + min;
        if (sec < 0 && min != 0) {
          min -= 1;
          sec = 59;
        } else if (sec < 10 && sec.length != 2) sec = "0" + sec;


       
        $("p").text(min + ":" + sec);
        if (min == 0 && sec == 0)
          clearInterval(timer);
  
  
      }, 1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
  <!-- make div to display timmer -->
    <div class="countdown"></div>
  <button onclick="startTimer()">click</button>
  <p></p>
    </body>
    </html>

Related