如何使用JavaScript创建秒表？ [英] How to create a stopwatch using JavaScript?

问题描述

if(stopwatch >= track[song].duration)

track [song] .duration 查找soundcloud音轨的持续时间。

track[song].duration finds the duration of a soundcloud track.

我期待创建秒表函数，当您单击 swap ID 秒表时，该函数开始计算毫秒数，以便在该函数点击在一段时间内，if函数会执行某些操作。在我的情况下，替换图像。此外，该功能会在再次点击时自行重置。

I am looking to create a stopwatch function that starts counting milliseconds when you click on the swap ID stopwatch so that when the function has been "clicked" for a certain amount of time the if function will do something. In my case replace an image. And also that the function will reset it itself when clicked again.

所以像秒表 = 当前时间 - 点击时间如何设置点击时间

so like stopwatch = current time - clicked time How can I set up the clicked time

当前时间 = new Date（）。getTime（）; ？这是以毫秒为单位吗？

current time = new Date().getTime(); ? And is this in milliseconds?

$('#swap').click(function()...

推荐答案

jsbin.com演示

你会看到演示代码只是一个启动/停止/重置毫秒计数器。如果你想在时间上进行幻想格式化，那完全取决于你。这应该足以让你开始。

You'll see the demo code is just a start/stop/reset millisecond counter. If you want to do fanciful formatting on the time, that's completely up to you. This should be more than enough to get you started.

这是一个有趣的小项目。以下是我如何处理它

This was a fun little project to work on. Here's how I'd approach it

var Stopwatch = function(elem, options) {

  var timer       = createTimer(),
      startButton = createButton("start", start),
      stopButton  = createButton("stop", stop),
      resetButton = createButton("reset", reset),
      offset,
      clock,
      interval;

  // default options
  options = options || {};
  options.delay = options.delay || 1;

  // append elements     
  elem.appendChild(timer);
  elem.appendChild(startButton);
  elem.appendChild(stopButton);
  elem.appendChild(resetButton);

  // initialize
  reset();

  // private functions
  function createTimer() {
    return document.createElement("span");
  }

  function createButton(action, handler) {
    var a = document.createElement("a");
    a.href = "#" + action;
    a.innerHTML = action;
    a.addEventListener("click", function(event) {
      handler();
      event.preventDefault();
    });
    return a;
  }

  function start() {
    if (!interval) {
      offset   = Date.now();
      interval = setInterval(update, options.delay);
    }
  }

  function stop() {
    if (interval) {
      clearInterval(interval);
      interval = null;
    }
  }

  function reset() {
    clock = 0;
    render();
  }

  function update() {
    clock += delta();
    render();
  }

  function render() {
    timer.innerHTML = clock/1000; 
  }

  function delta() {
    var now = Date.now(),
        d   = now - offset;

    offset = now;
    return d;
  }

  // public API
  this.start  = start;
  this.stop   = stop;
  this.reset  = reset;
};

为它获取一些基本的HTML包装

Get some basic HTML wrappers for it

<!-- create 3 stopwatches -->
<div class="stopwatch"></div>
<div class="stopwatch"></div>
<div class="stopwatch"></div>

那里的用法很简单

var elems = document.getElementsByClassName("stopwatch");

for (var i=0, len=elems.length; i<len; i++) {
  new Stopwatch(elems[i]);
}

作为奖励，您还可以获得定时器的可编程API。这是一个用法示例

As a bonus, you get a programmable API for the timers as well. Here's a usage example

var elem = document.getElementById("my-stopwatch");
var timer = new Stopwatch(elem, {delay: 10});

// start the timer
timer.start();

// stop the timer
timer.stop();

// reset the timer
timer.reset();

---

jQuery插件

至于jQuery部分，一旦你有如上所述的良好代码组合，编写一个jQuery插件就是简单的模式

---

jQuery plugin

As for the jQuery portion, once you have nice code composition as above, writing a jQuery plugin is easy mode

(function($) {

  var Stopwatch = function(elem, options) {
    // code from above...
  };

  $.fn.stopwatch = function(options) {
    return this.each(function(idx, elem) {
      new Stopwatch(elem, options);
    });
  };
})(jQuery);

jQuery插件使用

jQuery plugin usage

// all elements with class .stopwatch; default delay (1 ms)
$(".stopwatch").stopwatch();

// a specific element with id #my-stopwatch; custom delay (10 ms)
$("#my-stopwatch").stopwatch({delay: 10});

这篇关于如何使用JavaScript创建秒表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！