『徹夜する日の時計』【高校生の開発メモ009】

紹介する作品は実際に公開しています。覗いて頂けると嬉しいです(*´ω｀)っ

↑「徹夜する日の時計」

開発のきっかけ

丁度一年ほど前の作品に， 「寝ると決めるまでは今日」の時計 と題した作品がありました。これは，「寝ると決めた時」が夜の終わりになる仕組みを軸にした，夜中まで起きているときのための時計です。

じゃあ，徹夜したらそれっていつ？？？？

これの回答として提案したのが，「徹夜は今日の譲渡」。
今回の作品です。

時間表示の設計

この作品の軸は，「徹夜する」と決めた時，日付が変わる仕組みです。

日付の部分には，現実の日付に「徹夜する」ボタンを押した回数を加えています。
時間部分は現在の時刻からボタンを押した回数に24を掛けたもの引いて表示する仕組みになっています。

script.js

let dateNow=new Date();
let hourAdjust=0;
const fileWeek=["日", "月", "火", "水", "木", "金", "土"];

function advanceTime(){
  dateNow.setTime(dateNow.getTime()[phone]);
  hourAdjust+=24;
}

function setTime(){
  const year=dateNow.getFullYear();
  const month=dateNow.getMonth()+1;
  const day=dateNow.getDate();
  const week=fileWeek[dateNow.getDay()];

  dateReal=new Date();
  const hour=dateReal.getHours()-hourAdjust;
  const min=setTwo(dateReal.getMinutes());
  const sec=setTwo(dateReal.getSeconds());

  let a=document.getElementById("time");
  a.style.setProperty('--font',`${130/(cheackTen(hour)+6)}vw`);

  document.title=`${hour}:${min}`;
  a.innerText=`${hour}:${min}:${sec}`;
  document.getElementById("date").innerText=`${year}年,${month}月,${day}日,${week}曜日`;
}

function setTwo(num){
  return num.toString().padStart(2,'0');
}

function cheackTen(num){
  return String(num).length;
}

setInterval(setTime,100);

最後に

ある作品の実装前日に一睡も出来なかった経験が，去年の私からの進化部分です。思いつきを形にするって楽しいな，といつも思っています。

是非使ってみて下さい。

↑「徹夜する日の時計」(再掲)