如何使用JavaScript创建秒表？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

我希望创建一个秒表功能，当您单击swapID

stopwatch时，该功能将开始计时毫秒，以便当该功能被“单击”一定时间后，if函数将执行某些操作。就我而言，替换图像。并且该函数将在再次单击时将其自身重置。

就像stopwatch= current time- clicked time我该如何设置clicked time

current time= new Date().getTime();？这是毫秒吗？

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

回答：

[jsbin.com demo](http://jsbin.com/IgaXEVI/167/edit)

您会看到演示代码只是一个开始/停止/重置毫秒计数器。如果您想按时进行奇特的格式化，那完全取决于您。这应该足以让您入门。

这是一个有趣的小项目。这是我的处理方式

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包装器

<!-- 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。这是一个用法示例

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插件就很容易了

(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插件用法

// 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创建秒表？ 的全部内容， 来源链接： utcz.com/qa/406978.html

回到顶部