スタイリッシュなカウントダウンを実装

画面録画 2024-12-25 135650.mp4

HTMLの記述

Vue.js をCDNで読み込ませて実装 記述自体はHTMLの<script>タグで行う

<body>
    <div id="clock">
      <p class="date">{{ date }}</p>
      <p class="time">{{ time }}</p>
      <p class="text">DIGITAL CLOCK with Vue.js</p>
    </div>
    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
    <script src="cd.js"></script>
  </body>

CSSの記述

html,
body {
  height: 100%;
}
body {
  background: #0f3854;
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
  background-size: 100%;
}
p {
  margin: 0;
  padding: 0;
}
#clock {
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #daf6ff;
  text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
  .time {
    letter-spacing: 0.05em;
    font-size: 80px;
    padding: 5px 0;
  }
  .date {
    letter-spacing: 0.1em;
    font-size: 24px;
  }
  .text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
  }
}

jsの記述

var clock = new Vue({
  el: '#clock',
  data: {
    time: '',
    date: '',
  },
});

var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
  var cd = new Date();
  clock.time =
    zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
  clock.date =
    zeroPadding(cd.getFullYear(), 4) +
    '-' +
    zeroPadding(cd.getMonth() + 1, 2) +
    '-' +
    zeroPadding(cd.getDate(), 2) +
    ' ' +
    week[cd.getDay()];
}

function zeroPadding(num, digit) {
  var zero = '';
  for (var i = 0; i < digit; i++) {
    zero += '0';
  }
  return (zero + num).slice(-digit);
}

授業で学んだバージョン

スクリーンショット 2024-12-25 152221.png

jsの記述

function countDown() {
  let 終了年 = document.getElementById('year').textContent;
  let 終了月 = document.getElementById('month').textContent - 1;
  let 終了日 = document.getElementById('day').textContent;
  let 終了時 = document.getElementById('hour').textContent;
  let 終了分 = document.getElementById('min').textContent;
  let 終了秒 = 0;

  let end = new Date(終了年, 終了月, 終了日, 終了時, 終了分, 0);
  let 終了ミリ秒 = end.getTime();

  let now = new Date();
  let 今ミリ秒 = now.getTime();

  let 残りミリ秒 = 終了ミリ秒 - 今ミリ秒;

  let 日数 = 残りミリ秒 / (1000 * 60 * 60 * 24);
  残りミリ秒 = 残りミリ秒 % (1000 * 60 * 60 * 24);
  let 時数 = 残りミリ秒 / (1000 * 60 * 60);
  残りミリ秒 = 残りミリ秒 % (1000 * 60 * 60);
  let 分数 = 残りミリ秒 / (1000 * 60);
  残りミリ秒 = 残りミリ秒 % (1000 * 60);
  let 秒数 = 残りミリ秒 / 1000;

  let msg;
  if (Math.floor(日数) > 0) {
    msg =
      Math.floor(日数) +
      '日' +
      Math.floor(時数) +
      '時間' +
      String(Math.floor(分数)) +
      '分' +
      String(Math.floor(秒数)).padStart(2, '0') +
      '秒';
  } else {
    msg =
      Math.floor(時数) +
      '時間' +
      String(Math.floor(分数)) +
      '分' +
      String(Math.floor(秒数)).padStart(2, '0') +
      '秒';
  }
  document.getElementById('show').innerHTML = msg;
}

function start() {
  setInterval('countDown()', 1000);
}