jQuery Mobile秒表

Question

我正在尝试在JqueryMobile应用程序中制作秒表。我一直在按照之前发布的指南进行操作，链接如下：如何使用JavaScript创建秒表？

这个方法是有效的，但创建按钮的函数实际上只创建了3个链接，而我想要的是将它们作为按钮呈现。因此，目前它将生成以下HTML：

<a href="#start" class="ui-link">start</a>

我需要的是

<a href="#start" data-role="button" class="ui-link">start</a>

我已经尝试使用该函数进行操作，甚至在HTML中添加了自己的按钮，链接为#start、#stop、#reset，但无法使它们起作用。

该函数如下：

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;
}

- ghost3h

---

你是如何使用/调用 createButton() 的？类似于这个吗？ - Hanlet Escaño

Answer 1

将 ui-btn ui-btn-inline 类添加到 createButton 中的链接。由于您已经在使用 jQuery，因此我还更新了秒表以使用 jQuery 进行 DOM 操作。

(function($) {
    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;

      var $elem = $(elem);

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


      // initialize
      reset();

      // private functions
      function createTimer() {
        return $('<span class="swTime"></span>');
      }

      function createButton(action, handler) {
        var a = $('<a class="' + action + ' ui-btn ui-btn-inline">' + action + '</a>');
        a.on("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.text(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;
    };

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

$(document).on("pagecreate","#page1", function(){ 
    $(".stopwatch").stopwatch();
});

演示

- ezanker

---

首先，不要通过将链接放在引用块中来装饰链接。其次，您应该在答案中发布您已更改的代码，并链接到JSFiddle演示（如果您仍然认为这是必要的），否则如果JSFiddle离线，此答案将毫无意义。 - James Donnelly

太好了，谢谢！现在我已经让它在我的页面上运行了。我正在尝试将计时器放入一个文本框中以使其更美观。如果我使用以下代码，它可以工作：但是如果我使用以下代码（我想要的），它就不起作用： - ghost3h

@user3346481，请将渲染函数更改为使用val()而不是text()：http://jsfiddle.net/ezanker/re71o98o/6/ - ezanker