javascript - 如何停止正在运行的倒计时器？-6ren

javascript - 如何停止正在运行的倒计时器？

转载作者：行者123 更新时间：2023-12-02 22:15:15

我有一个文本框和一个按钮。按下它将根据文本框值计算剩余时间。

例如，对于值 3600(=秒)，它将计算剩余时间:0 天，0 小时，59 分 59 秒。

第一次运行计时器效果很好，但我需要它在按下第二个按钮时重置并再次计算时间 - 而且效果不佳。如何停止计时器并再次运行以获得新的输入值？基于 w3schhol 示例和另一个 Web 示例的代码(您可以测试它):

 // Set the date we're counting down to

    function setTimer()
    {

    var timeSpan = convert();
    //var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
    var countDownDate = new Date(timeSpan).getTime();

    // Update the count down every 1 second
    var x = setInterval(function() 
    {
 
  
      // Get today's date and time
      var now = new Date().getTime();
    
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
    
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
    
      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
          }
        }, 1000);


    }

    function convert()
    {
    var now = new Date()  
    var secondsSinceEpoch = Math.round(now.getTime() / 1000)  

     // Unixtimestamp
     var unixtimestamp = document.getElementById('timestamp').value;
     unixtimestamp = parseInt(unixtimestamp);
     secondsSinceEpoch = parseInt(secondsSinceEpoch);
     unixtimestamp = unixtimestamp +  secondsSinceEpoch;
     // Months array
     var months_arr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

     // Convert timestamp to milliseconds
     var date = new Date(unixtimestamp*1000);

     // Year
     var year = date.getFullYear();

     // Month
     var month = months_arr[date.getMonth()];

     // Day
     var day = date.getDate();

     // Hours
     var hours = date.getHours();

     // Minutes
     var minutes = "0" + date.getMinutes();

    // Seconds
     var seconds = "0" + date.getSeconds();

     // Display date time in MM-dd-yyyy h:m:s format
     var convdataTime = month+' '+day+', '+year+' '+hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
     //"Jan 5, 2021 15:37:25"
     document.getElementById('datetime').innerHTML = convdataTime;
     return convdataTime;
    }

 <!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>
    </head>
    <body>
    <input type='text' value='1490028077' id='timestamp'>&nbsp;
    <input type='button' id='convert' value='Convert' onclick='setTimer()'>

    <br><br>
    <span id='datetime'></span>
    <p id="demo"></p>

    </body>
    </html>

我尝试放置一个计数器变量，并在变量 == 2 时调用 return (从

var x = setInterval(function()

)但没有成功...

这是一个例子:

最佳答案

var interval;
function setTimer()
    {

clearInterval(interval)

    var timeSpan = convert();
    //var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
    var countDownDate = new Date(timeSpan).getTime();

    // Update the count down every 1 second
    interval = setInterval(function() 
    {
 
  
      // Get today's date and time
      var now = new Date().getTime();
    
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
    
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
    
      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(interval);
        document.getElementById("demo").innerHTML = "EXPIRED";
          }
        }, 1000);


    }

    function convert()
    {
    var now = new Date()  
    var secondsSinceEpoch = Math.round(now.getTime() / 1000)  

     // Unixtimestamp
     var unixtimestamp = document.getElementById('timestamp').value;
     unixtimestamp = parseInt(unixtimestamp);
     secondsSinceEpoch = parseInt(secondsSinceEpoch);
     unixtimestamp = unixtimestamp +  secondsSinceEpoch;
     // Months array
     var months_arr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

     // Convert timestamp to milliseconds
     var date = new Date(unixtimestamp*1000);

     // Year
     var year = date.getFullYear();

     // Month
     var month = months_arr[date.getMonth()];

     // Day
     var day = date.getDate();

     // Hours
     var hours = date.getHours();

     // Minutes
     var minutes = "0" + date.getMinutes();

    // Seconds
     var seconds = "0" + date.getSeconds();

     // Display date time in MM-dd-yyyy h:m:s format
     var convdataTime = month+' '+day+', '+year+' '+hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
     //"Jan 5, 2021 15:37:25"
     document.getElementById('datetime').innerHTML = convdataTime;
     return convdataTime;
    }

<!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>
    </head>
    <body>
    <input type='text' value='1490028077' id='timestamp'>&nbsp;
    <input type='button' id='convert' value='Convert' onclick='setTimer()'>

    <br><br>
    <span id='datetime'></span>
    <p id="demo"></p>

    </body>
    </html>

关于javascript - 如何停止正在运行的倒计时器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59408241/

文章推荐： elasticsearch - ElasticSearch与ElasticSearch + Cassandra

文章推荐： matlab - 如何在 Matlab 中更改 clustergram 的字体大小？

文章推荐： R2WinBUGS 错误 - 陷阱 - 不兼容的副本

文章推荐： Elasticsearch 查询 - 按 @timestamp 和另一个字段排序？

android - 如何在黑色条码android上扫描白色(倒 jar )？
我想在 android 中扫描黑底白字条码。我使用过 zxing，它允许我只扫描白底黑字。我如何扫描和倒置条形码或使用哪个库？感谢您的帮助。最佳答案如果您仍在引用 journeyapps 嵌入式
c++ - 倒 X 轴 OpenGL
所以我在 youtube 上观看了一些介绍性类(class)以学习 OpenGL 的基础知识并学习了诸如制作三角形和简单相机类等内容。我一直想尝试制作体素引擎，这显然是第一个我想做的是一个我最终可以复
html - 倒 Angular 边框不同容器颜色 CSS
这个问题在这里已经有了答案: Div with cut out edges, border and transparent background (6 个答案) 关闭 8 年前。
html - 倒 Angular/圆 Angular 图像 HTML
我有一张图片，我正在查看用 HTML 创建的小型网站的基本定制。我知道您可以对图像进行倒 Angular 处理，如 this question here 中所示，这给出了 45 度切割。我希望每个
iphone - iOS 中的自定义形状(倒 T)边框 Uiview
我必须在 iOS 上创建一个自定义形状(倒 T)边框的 Uiview。我附上下面的截图。我进行了很多研究，找到了一种使用 here 中的 UIBezierPath 的方法. 但我不知道如何将我的 Vi

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何停止正在运行的倒计时器？