【问题标题】:jQuery stopwatch with milliseconds and spacebar as trigger [closed]以毫秒和空格键作为触发器的jQuery秒表[关闭]
【发布时间】:2013-04-03 21:17:16
【问题描述】:

我刚开始“学习”jQuery,所以我几乎一无所知。但是,我想要一个秒表,显示分钟、秒和毫秒。我想通过按空格键启动计时器,并通过再次按空格键停止计时器。有谁知道如何做到这一点?请记住,我对 jQuery 还很陌生,所以一个好的描述会很棒。

谢谢!

【问题讨论】:

标签: jquery timer space stopwatch milliseconds


【解决方案1】:

JQuery 秒表示例可以在这里找到:http://www.jquery4u.com/jquery-date-and-time-2/online-jquery-stopwatch/

对于使用空格键的开始/停止,请使用:

$('body').keyup(function(e){
   if(e.keyCode == 32){
       // user has pressed space
       ss();
   }
});

【讨论】:

    【解决方案2】:

    一种方法是使用new Date().getTime() 检索当前时间 并在一个区间内比较我们存储的初始时间和当前时间:

    currentTime - startTime = difference in MS

    现在有了 MS 的差异,我们可以轻松地做一些基本的数学运算:

    LIVE DEMO

    var int, ms=0, s=0, m=0;
    
    function swatch(){
    
      var startTime = new Date().getTime();
      int = setInterval(function(){
          var time = new Date().getTime(); 
          var dif = time-startTime;
          ms= dif%1000;
          s = Math.floor(dif/1000)%60;
          m = Math.floor(dif/1000/60)%60;
          $('#swatch').text( m+':'+s+':'+ms); 
      },1);
    
    }
    
    
    $(document).on('keydown', function( e ){
       if(e.keyCode == 32 && !int){
            swatch();
       }else{
         clearInterval(int);
         int=0;
       }
    });
    

    OR THIS WAY (Read Rick's comments below) 用于前导“0”

      s = ('0'+ Math.floor(dif/1000)%60 ).slice(-2);
      m = ('0'+ Math.floor(dif/1000/60)%60 ).slice(-2);
    

    【讨论】:

    • +1 但是:$('#swatch').text(('0'+m).slice(-2)+':'+('0'+s).slice( -2)+':'+ms);只是因为它更漂亮;)
    • @RickCalder 在演示中实现了您对.slice() 的出色使用。
    • 很好,在看到你的答案之前我一直在摆弄这个,然后意识到我对 js 的了解有多么少。
    • @RickCalder 哦... :) 很想知道您的想法(我想您在将间隔归零时遇到问题...或者?)。无论如何,我希望你能看到它实际上是多么容易构建!
    猜你喜欢
    • 2012-03-20
    • 1970-01-01
    • 2016-06-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多