Question

嗨，我现在已经四处寻找了几天，我认真找不到任何东西，我想要的是在div中调用span并获得跨越innerHTMTL。现在代码看起来像这样：

跨度如下：

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

你可以看到这个跨度在这个div中：

var Stopwatch = {
init: function(elem, options) {

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

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

    elem.appendChild(timer);
    elem.appendChild(startButton);
    elem.appendChild(stopButton);
    elem.appendChild(resetButton);

    reset();

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

我尝试使用Stopwatch.span.innerHTML，.stopwatch span.innerHTML以及许多其他方式来调用此方法。您可以使用此.stopwatch span在css中调用它，但这是我需要在按钮或类似<button id="first" onclick=".stopwatch span.innerHTML;"></button>之类的内容中调用它的问题。但它起作用了！如果有任何问题请提前询问和感谢！：）

更新：这是一个混乱的JsFiddle http://jsfiddle.net/dzcv9847/

Answer 1

您必须深入了解该函数并将var timer = createTimer(),更改为this.timer = createTimer();才能使用类似Stopwatch.timer.innerHTML;的内容，但是现在创建计时器的方式，该对象无法访问它是。

无需更改即可使用：

window.onload=function() {
  var elems = document.getElementsByClassName("basic");
  for (var i = 0, len = elems.length; i < len; i++) {
    Stopwatch.init(elems[i]);
  }
  document.getElementById("first").onclick=function() {
    var val = document.querySelector('.stopwatch > span').innerHTML;
    document.getElementById("lap").innerHTML=val;
  }  
}

FIDDLE

更新：更优雅一点：

    lapButton = createButton("lap", lap),
    lapSpan = createTimer(),
    ...
    function lap() {
      lapSpan.innerHTML=timer.innerHTML;
    }

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

FIDDLE

Answer 2

我个人在.basic div元素中插入按钮（不要使用id，而是使用class）：

<div class="basic stopwatch">
    <button class="get-timer" >Get milliseconds and display under this button onclick:</button>
    <div class=output></div>
</div>

然后：

[编辑] （已删除提醒 @mplungjan ）

var Stopwatch = {
    init: function(elem, options) {

        // ...
        var getTimerBtn = elem.getElementsByClassName("get-timer")[0];
        var outputElem =  elem.getElementsByClassName("output")[0];
        getTimerBtn.onclick = function(){
            outputElem.innerText = timer.innerText;
        }
        // ...

    }
}

这样，您可以拥有多个timer实例（请参阅演示），而无需单独重复每个按钮的代码。

DEMO

在div中跨越innerHTML

2 个答案: