我有一些代碼的秒錶這裏：https://github.com/Aerodyll/Stopwatch如何複製一個Javascript
正如你可以看到櫃檯改變了4個標籤時，分，秒和毫秒的HTML。它連接到3個按鈕，啓動，停止和清除。
這工作正常，當屏幕上只有一個計數器，但我將如何改變此代碼，使其一次在屏幕上的多個計數器（這一切都獨立工作）？當我現在複製它時，它會中斷。我明白爲什麼它打破了，因爲它指向的是相同的html對象，但我怎樣才能在頁面上覆制計數器而無需爲每個對象編寫全新的腳本？
（我已經發現一對夫婦的其他用戶這樣做的例子，但他們的代碼是非常困難的，我聽不懂。）
正常工作時，有在屏幕上只有一個櫃檯，但我怎麼會 改變這個代碼，使其用於多個計數器工作在 一次在屏幕上...
div以創建多個塊。如果要單獨針對這些包裝，請給這個包裝id。或者，只要給它一個相同的class，如果你想瞄準他們。id或元素本身調用該函數。span的引用。這可以通過class或nth-child選擇器完成。實施例：
下面的例子是原始的代碼，只是重構按照上述要點。
var allWatches = document.getElementsByClassName('stopwatch'),
firstWatch = document.getElementById('sw1')
;
// One way to call stopwatch on individual blocks
//stopWatch('sw1'); // pass id to the function
// Another way to call stopwatch on individual blocks
//stopWatch(firstWatch); // pass the element ref to the function
// One way to call stopwatch on all blocks
for(i=0; i < allWatches.length; i++) {
stopWatch(allWatches[i]);
}
function stopWatch(element) {
/* Declaring the html objects that will contain the time */
var hrs, mins, secs;
/* Declaring the html buttons */
var start, stop, clear;
/* Other variables */
var seconds = 0, minutes = 0, hours = 0, t;
// check if id is passed or the actual element reference
if (typeof element === 'string') {
element = document.getElementById(element);
}
// get reference to component elements inside
hrs = element.querySelector('.hours');
mins = element.querySelector('.minutes');
secs = element.querySelector('.seconds');
start = element.querySelector('.start');
stop = element.querySelector('.stop');
clear = element.querySelector('.clear');
function runWatch() {
seconds++;
if (seconds >= 60) {
seconds = 0; minutes++;
if (minutes >= 60) {
minutes = 0; hours++;
}
}
/* Hours */
if (hours == null) {
hrs.textContent = "00";
} else {
hrs.textContent = hours > 9 ? hours : "0" + hours;
}
/* Minutes */
if (minutes == null) {
mins.textContent = "00";
} else {
mins.textContent = minutes > 9 ? minutes : "0" + minutes;
}
/* Seconds */
if (seconds == null) {
secs.textContent = "00";
} else {
secs.textContent = seconds > 9 ? seconds : "0" + seconds;
}
t = setTimeout(runWatch, 1000);
} // End of runWatch
\t
runWatch();
\t
/* Start button */
start.onclick = runWatch;
/* Stop button */
stop.onclick = function() { clearTimeout(t); }
/* Clear button */
clear.onclick = function() {
hrs.textContentL = "00"; mins.textContent = "00"; secs.textContent = "00";
clearTimeout(t);
seconds = 0; minutes = 0; hours = 0;
} \t
}* { box-sizing: border-box; margin: 0; padding: 0; }
div.stopwatch {
width: 180px; border: 1px solid #999;
margin: 8px; display: inline-block;
}
div.stopwatch > div { display: flex; margin: 8px; }
div.stopwatch > div > * { flex: 1 1 auto; }
div.stopwatch > div > span {
text-align: center;
font-family: sans-serif; font-size: 1.7em;
}
div.stopwatch > div > button {
padding: 2px 4px;
}<div id="sw1" class="stopwatch">
<div>
<span class="hours">00</span>
<span class="minutes">00</span>
<span class="seconds">00</span>
</div>
<div>
<button class="start">start</button>
<button class="stop">stop</button>
<button class="clear">clear</button> \t
</div>
</div>
<div id="sw2" class="stopwatch">
<div>
<span class="hours">00</span>
<span class="minutes">00</span>
<span class="seconds">00</span>
</div>
<div>
<button class="start">start</button>
<button class="stop">stop</button>
<button class="clear">clear</button> \t
</div>
</div>謝謝你，你已經回答了我的問題，還有一些我沒有問過。真的有幫助，歡呼。 – Aerodyll
請問我有幾分鐘的時間來向我解釋第1-14行的JS（包括評論）中發生了什麼。今晚我一直在爲此打了幾個小時的頭，雖然我理解了它的各個部分，但我並沒有把握它們是如何結合在一起的，也不知道它實際上在頁面上做了什麼。 謝謝 Aero – Aerodyll
@Aerodyll：有幾種方法來定位元素。第一個註釋語句是一個例子，你如何才能將元素的'id'傳遞給你的函數。然後在函數中使用'getElementById'來獲取對該元素的引用。第二個註釋示例顯示如何首先獲取引用並將其傳遞給函數。在函數中，然後直接使用該引用。第三個例子（沒有評論）是在這個答案中使用的。它只是獲取具有相同className的所有元素的'nodeList'引用，迭代並調用每個元素的函數。 – Abhitalks
如果你想擁有秒錶的多個實例的工作，你會顯然需要更多的開始停止按鈕。你可以調用這個函數，這個函數會添加一個參數，該參數是按鈕ID。然後按鈕ID會告訴功能什麼秒錶來添加時間。當然，秒錶也需要用唯一的編號來定義，所以你可以指向它:)
祝你好運與學習！
給出一個ID爲包含反每個格 - 存儲這些ID陣列內的在你的JS - 循環在你的陣列，做你的東西，每個櫃檯 – Weedoze
不要硬編碼HTML元素的ID，使它們成爲一個變量。將代碼放入一個函數，該函數接受HTML元素的名稱作爲參數（並將其用作所述變量）。用不同的參數多次調用該函數。 – deceze