时间戳

首页 > 解决方案 > 使用 Moment.js 在 JavaScript 中单击按钮时显示新计时器

javascript - 使用 Moment.js 在 JavaScript 中单击按钮时显示新计时器

问题描述

我使用 Moment.js 制作了一个计时器，它工作得非常好，但我有一个似乎无法解决的问题。我做了一个按钮，我想在单击按钮时显示我的新计时器，我不知道要添加什么代码才能使它工作。我错过了什么？

  <!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>

标签： javascriptjquerymomentjs

解决方案

如果我理解得很好，您可以将它放在一个函数中并在按钮单击时调用它。

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>

推荐阅读