頭が真っ白の人にお送りする,JavaScriptを使用して経過時間表示

setIntervalのみ使った完成図

var i= 1;
var countup=function(){
 var x = i++;
 var count=document.getElementById(‘count’).innerHTML=Math.floor(x/60)+“分”+(x%60)+“秒経過“;
};
 setInterval(countup, 1000);

Webで検索をかけるとnew Dateを用いた経過表示や、ボタンを押したタイミングからカウントを開始するものがヒットしたが、setIntervalのみで分秒経過表示を記載しているサイトに巡り合わなかったので一筆。下記にはコード完成までにぶつかった壁の対処を順列。

疑問1　そもそもどうやってHTML上に表示させればいいのか

var count = 0;
  var countup = function(){
    console.log(count++);
  } 
  setInterval(countup, 1000);

手持ちのコードは一秒毎にカウントした数値をconsoleに表示するもの。
とりあえずHTMLにdivタグとIdを記述して、document.getElementByIdにてIdを取得した後、var countとして変数に変えてみる。「要素の中身変更　js」でググって出てきた.innerHTMLを足すと以下のようになる。申し訳程度に数字だけ表示されるコードの完成である。

var i= 0;
var countup=function(){
 var count=document.getElementById(‘count’).innerHTML=(i++);
}
setInterval(countup, 1000);

疑問1　そもそも分と秒をどう設定すればいいのか

var x=i++ 
省略.innerHTML=x%60+"秒経過";

i++のまま弄るのは分かりづらいのでi++=xと変更。xのまま秒表示させると６０を超えてもカウントが続いてしまう。
そこで「x%60」。実際にグーグル検索で適当な数値を代入して気づいたのが、xが６０を越えるまでは割り切れない(=0.小数点となる)為、１〜５９までを表示してくれるのだ。

疑問2　if文を用いて秒を分に変えれば良いのでは

if(x>60){
省略.innerHTML=(x%60)+"分";
};

一見問題なさそうに動くと思われたが、if文を抜けた後にsetIntervalによる処理が実行されていたことを見落とし、一秒毎に、１,２分と処理されてしまったのでアウト。一行で分秒表示させるコードを書く以外ではダメそうなので却下。

疑問３　分をどう表示すればいいのか

省略.innerHTML=(x/60)+"分";

（文系脳）秒数から60を引いた数値にxを掛けた後に６０で割った数値を記述すればいいのだ・・・と試行錯誤を繰り返して期待結果にならない作業を延々と繰り返した後に閃いた答えがこれ。
xが６０を越えてからの計算処理にこだわらずに、秒数を６０で割れば分が出るという当たり前なことでした。
このままでは小数点まで表示されてしまうので

=Math.floor(x/60)

Math.floorを使って小数点を省いて表示するとあら不思議。カウント60毎に無事「分」が表示されるようになりました。

感想

タイマー表示なんか楽だろうとタカを括っていざコード記述に至ると、頭が真っ白、何から手をつければいいかすら思い浮かびませんでした。各問題点を理解した後、原因を分析ー原因を仮定ー仮定案を実行をループにしてコードを書く基本が身についたので、ヨシ。
以下参考リンク
setIntervalとは
経過時間（秒数）をリアルタイムに表示する方法
経過時間を表示する（1）
経過時間の測定
JavaScript【 Date 】４ ～ setIntervalでリアルタイム表示