読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

デジタル時計

タイマーを活用する

  • タイマーを開始する setTimeout( )メソッド
変数 = setTimeout( '処理', 時間 );
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デジタル時計</title>
<style>
#clock {
  width: 400px;
  background-color: #000;
  color: #FFF;
  text-align: center;
  border:10px solid #666;
  font-size: 90px;
  font-family:monospace;
  font-weight:bold;
  padding: 10px 20px;
}
</style>
<script>
var hourSpan, minSpan, secSpan, now;
var hour, min, sec;
window.onload = init;
function init(){
  hourSpan = document.getElementById('hour');
  minSpan =  document.getElementById('min');
  secSpan =  document.getElementById('sec');	
  dClock();
}

function dClock(){
  now = new Date();
  hour = now.getHours();
  min = now.getMinutes();
  sec = now.getSeconds();

  if (hour < 10) hour = '0' + hour;
  if (min < 10) min = '0' + min;
  if (sec < 10) sec = '0' + sec;

  hourSpan.textContent =hour;
  minSpan.textContent =min;
  secSpan.textContent =sec;
  setTimeout('dClock()',1000);
}
</script>
</head>
<body>
<h1>デジタル時計</h1>
<div id="clock">
<span id="hour">00</span>:<span id="min">00</span>:<span id="sec">00</span>
</div>
</body>
</html>