Chrome のコンソールで動くちょっと派手目なタイマー

console で動くちょっと派手目なタイマーを作りました

スクリプト全体

{
// 各種定数
const alertMessage = "時間です"
const htmlBody = document.getElementsByTagName('body');


// タイマーのセット

const timerSet = () => {
  let sec = prompt('計測したい秒数を半角の数字で入れてください');

  if(!isNaN(parseInt(sec, 10))) {
    countDown(sec);
  } else {
    alert('これは半角の数字ではありません。再入力してください');
    timerSet();
  }
};


// カウントダウンタイマー

const countDown = (sec) => {
  let nowDate = new Date();
  const endDate = new Date(nowDate.getTime() + sec * 1000);

  let count = sec;
  const interval = setInterval(function(){
    count--;
    console.log(count);
    nowDate = new Date();
    if(nowDate.getTime() >= endDate.getTime()){
      clearInterval(interval);
      setAlert();
    }
  }, 1000);
};


// アラート時の動作

const setAlert = () => {
  const htmlHead = document.getElementsByTagName("head");
  let createStyle = document.createElement("style");
  createStyle.setAttribute("type", "text/css");
  createStyle.innerHTML = ".vibrate { animation: vibrate .1s  infinite; } @keyframes vibrate { 0% {transform: translate(0px, 0px) rotateZ(0deg)} 25% {transform: translate(2px, 2px) rotateZ(1deg)} 50% {transform: translate(0px, 2px) rotateZ(0deg)} 75% {transform: translate(2px, 0px) rotateZ(-1deg)} 100% {transform: translate(0px, 0px) rotateZ(0deg)}}";
  htmlHead[0].appendChild(createStyle);
  htmlBody[0].classList.add('vibrate');
  setTimeout(() => {
    alert(alertMessage);
    htmlBody[0].classList.remove('vibrate');
  }, 500);
};


// タイマー関数開始

timerSet();
}

解説

特に特殊なことはしてません。
ぜひ chrome の コンソールで動かしてみてください。