数字が動きまくって落ち着きないデジタル時計

動作結果

 

製作時のキャプション

　年のバーは世紀で割合を出してます。

<div id='timeRod'></div>
<script>
function pg(DOM){
  const second   = new Date().getSeconds() + new Date().getMilliseconds() / 1000;
  const minute   = new Date().getMinutes();
  const hour     = new Date().getHours();
  const date     = new Date().getDate();
  const month    = new Date().getMonth()+1;
  const year     = new Date().getFullYear();
  const monthDay = new Date(parseInt(year, 10), parseInt(month, 10), 0).getDate();
  
  const secondPer   = second/60;
  const minutePer   = minute/60 + secondPer/60;
  const hourPer     = hour/24   + minutePer/24;
  const datePer     = (date-1)/monthDay + hourPer/monthDay;
  const monthPerNum = (month-1)/12 + datePer/12;//Numは月ごとの割合。Rodは年を通しての割合
  const monthPerRod = (function () {
    const now   = new Date().getTime();
    const first = new Date(new Date().getFullYear(),0);
    const end   = new Date(new Date().getFullYear()+1,0);
    return (now-first)/(end-first-1);
  }());
  const yearPer        = monthPerRod;
  const yearPerCentury = (year-1)%100/100 + monthPerRod/100;//世紀ごと
  
  const PGText =
            '<label for="yea">年:'                                        +(year+yearPer).toFixed(8)+                  '</label><progress id="yea" max="1" value="'+yearPerCentury+'"></progress>'
    +'<br>'+'<label for="mon">月:<span style="opacity: 0;">00</span>'+("0"+(monthPerNum*12+1).toFixed(8)).slice(-11)+  '</label><progress id="mon" max="1" value="'+monthPerRod+   '"></progress>'
    +'<br>'+'<label for="dat">日:<span style="opacity: 0;">00</span>'+("0"+(datePer*monthDay+1).toFixed(8)).slice(-11)+'</label><progress id="dat" max="1" value="'+datePer+       '"></progress>'
    +'<br>'
    +'<br>'+'<label for="hou">時:'+("0"+(hourPer*24).toFixed(3)).slice(-6)+  '</label><progress id="hou" max="1" value="'+hourPer+  '"></progress>'
    +'<br>'+'<label for="min">分:'+("0"+(minutePer*60).toFixed(3)).slice(-6)+'</label><progress id="min" max="1" value="'+minutePer+'"></progress>'
    +'<br>'+'<label for="sec">秒:'+("0"+(secondPer*60).toFixed(3)).slice(-6)+'</label><progress id="sec" max="1" value="'+secondPer+'"></progress>'
  ;
  if(DOM){document.getElementById("timeRod").innerHTML = PGText;}
  else{return PGText;}
}
window.onload = function(){pg("DOM"); console.log('onload pg("DOM")');}
setInterval('pg("DOM")',19);//偏り出ないようそれらしい素数にする
</script>

作ってて苦労したり配慮したりした点

• 時分秒は0から始まるのに月日は1から始まるんですね。何故。
• 月の動作を数値の所とバーの所を別々に作りました。数字は頭にその月が入ってないといけないのと、バーは年間を通した現在値を見るのですが月の日数がその月ごとにまばらだから数値の容量で作ってはいけないのと。バーの処理は今年1月1日から来年1月1日までのミリ秒を算出してそれに-1ミリ秒して年全体のミリ秒を出し、今年1月1日から現在までのミリ秒を出し、(年始めから現在までのミリ秒)÷(年全体のミリ秒)をしました。計算用の情報を探すのに地味に時間がかかりました。
• 世紀の始まりはXX00年かXX01年かという論争がありますが、こちらのソースではよく浸透しているXX01年を採用してます。
• setIntervalの時間はそれらしい素数にすべきです。例えば250という素数でない数字をsetIntervalにした場合、秒の所で表示される小数点は第一位が2,5,7,0、第二位が5,0、第三位が0という数字に偏ってしまい動いてる感がなくなってしまいます。数字が完璧に偏らないためには偏り出ない素数を選んで使うと良いです。