Question

我试图在JqueryMobile应用程序中制作秒表。我一直关注上一篇文章How to create a stopwatch using 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，＃red的href，但是无法让它们工作

功能是：

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

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

<强> DEMO

Jquery Mobile秒表

1 个答案: