ストップウォッチを作る際に必要な剰余の計算が理解できません

Question

前提・実現したいこと

こちらのページでストップウォッチを作成しています。
時間を計算する部分で、"1%60"のような剰余の計算が出てくるのですが、なぜ割れない数字が余りの値を返すかわかりません？一体どのような計算が行われいるのでしょうか？
以下のコードのMath.floorの後ろの部分です。
なぜこのような計算をすると時間/分数/秒数が求められるのでしょうか？

該当のソースコード

// Define a counter variable for the number of seconds and set it to zero.
let secondCount = 0;

// Define a global to store the interval when it is active.
let stopWatch;

// Store a reference to the display paragraph in a variable
const displayPara = document.querySelector('.clock');

// Function to calculate the current hours, minutes, and seconds, and display the count
function displayCount() {
  // Calculate current hours, minutes, and seconds
  let hours = Math.floor(secondCount / 3600);
  let minutes = Math.floor((secondCount % 3600) / 60);
  let seconds = Math.floor(secondCount % 60)

  // Display a leading zero if the values are less than ten
  let displayHours = (hours < 10) ? '0' + hours : hours;
  let displayMinutes = (minutes < 10) ? '0' + minutes : minutes;
  let displaySeconds = (seconds < 10) ? '0' + seconds : seconds;

  // Write the current stopwatch display time into the display paragraph
  displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds;

  // Increment the second counter by one
  secondCount++;
}

// Store references to the buttons in constants
const startBtn = document.querySelector('.start');
const stopBtn = document.querySelector('.stop');
const resetBtn = document.querySelector('.reset');

// When the start button is pressed, start running displayCount() once per second using displayInterval()
startBtn.addEventListener('click', () => {
  stopWatch = setInterval(displayCount, 1000);
  startBtn.disabled = true;
});

// When the stop button is pressed, clear the interval to stop the count.
stopBtn.addEventListener('click', () => {
  clearInterval(stopWatch);
  startBtn.disabled = false;
});

// When the reset button is pressed, set the counter back to zero, then immediately update the display
resetBtn.addEventListener('click', () => {
  secondCount = 0;
  displayCount();
});

// Run displayCount() once as soon as the page loads so the clock is displayed
displayCount();

試したこと

たとえば、secondCountの値が1なら、1割る60の余りが1になるということですよね？
60割る3600の余りを60で割ると1になるってことですよね？
これがさっぱりわからないのです。
僕の認識では、1は60では割れないので余りは出ずに0になる。と思うんですが、%の扱いについて何か認識違いをしているのかもしれません。

%演算子のページも読みましたが、明確な答えは得られませんでした。

加えてこの計算が理解できたとして、何故このような計算をすると時間/分数/秒数が求められるのかもよくわかりません。
ご教授のほど、よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

"1%60"のような剰余の計算が出てくるのですが、なぜ割れない数字が余りの値を返すかわかりません？

1%60の場合、商は0、あまりが1です。

Comments

[Demerara]

回答ありがとうざいます。
1 - (60 * 0) = 1ってことですね。なんとなく理解できました。
つまり、割れなければ常に割られる側の値を返すということですね。

[m.ts10806]

一般常識(算数)の話をややこしくしすぎです。

Answer 2

理論ではなく一般常識と計算結果をconsole.log()などで確認したほうが良いと思います。

1時間は60分
1分は60秒

これが前提です。

60分で割って余る＝時間に昇華されなかった分
60秒で割って余る＝分に昇華されなかった秒

です。

secondCount = 3000;

hours = Math.floor(secondCount / 3600);
minutes = Math.floor((secondCount % 3600) / 60);
seconds = Math.floor(secondCount % 60)

console.log(hours); //3600秒未満なので0時間
console.log((secondCount % 3600)); //3600秒未満なので3000すべてが余り
console.log(minutes);//↑から 3000/60になるので割り切れて50分
console.log(seconds);//あまりは出ないので0秒


//適当に入れて確認
secondCount = 132321;

hours = Math.floor(secondCount / 3600);
minutes = Math.floor((secondCount % 3600) / 60);
seconds = Math.floor(secondCount % 60)

console.log(hours); 
console.log((secondCount % 3600));
console.log(minutes);
console.log(seconds);
/**
36
2721
45
21
**/

Comments

[Demerara]

回答ありがとうざいます。
まだ、何故剰余を使うという考えに至ることができるのかわかりませんが、少なくとも計算は理解できました。
無知で申し訳ないですが、"昇華されなかった"とはどういった意味ですか？"昇華"という単語を辞書で引いてもそれらしい意味は見つけられませんでした。プログラミングの専門用語でしょうか？

[Demerara]

わかりました！
なんで秒数と分数の計算に剰余を使うのかがわからなかったのですが(単に割り算使えばいいのではと思ってました)、これは59になった時、再び00に戻してカウントを始める必要があるからですね！

[m.ts10806]

専門用語ではないですけど、60で一つ上の位が増えるという意味で使いました。そこで残ったぶん(今回で言う余り)が分なり秒なりの単位で扱われる数値になります（つまりあくまでプログラムの話ではなく一般常識の範疇）

[think49]

> 60で一つ上の位が増えるという意味
「一つ上の位」で思いつきましたが、六十進数で捉える方法もありますね。
https://jsfiddle.net/t76yd5cx/
https://gist.github.com/think49/011dffc5ebca34fd804d3baae6666f5a

[m.ts10806]

think49さん
計算のしかたとしてはありますね。10進法に慣れすぎてて目がいかないですけど、むしろそちらの方が見やすくなるかも。