指定時間後に処理を実行０２

JavaScript 基礎 授業



DOMによる記述


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デジタル時計</title>

<style>

#clock {
  width: 450px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border: 10px solid #666;
  font-size: 90px;
  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.getElemwntById("min");
  secSpan = document.getElwmwntById("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.innerHTML = hour;
  minSpan.innerHTML = min;
  secSpan.innerHTML = sec;
  setTimeout("dClock()",1000);
		}
</script>

</head>
<body>

<h1>デジタル時計</h1>
<p>2013年1月23日 (水曜日)</p><!-- Dwでの日付の設定 -->
<div id="clock">

<span id="hour">00</span>:<span id="min">00</span>:<span id="sec">00</span>

</div>

</body>
</html>

ブラウザで表示