웹페이지에 시간을 표시해주는 시계 소스입니다.
시간은 로컬 피씨의 시간으로 표시됩니다.(자바스크립트는 로컬브라우저에서 작동되는 프로그램이므로..)
개념 - 웹페이지 로드시 로컬피씨와의 시간을 동기화 한다. 초단위의 정보를 가져와서 동기화하여 분이 바뀌는 시점에서
웹페이지의 시계 역시 동일하게 바뀌도록 로직을 구성한다.
<html>
<head>
<script>
var now = new Date();
function watch(){
hour = now.getHours();
min = now.getMinutes();
if(min<10)
min = "0"+min;
var ampm;
if (now.getHours() <= 12) {
apm = "오전";
}else {
apm = "오후";
}
document.getElementById("time").innerHTML = apm + " " + hour + ":" + min;
}
function startTimeInterval(){ //처음 분변경이후부터 60초마다 분변경
watch();
t = setInterval('watch()', 60000)
}
function initTime(){ //처음 로드시 남은 초를 계산하여 다음 분으로 변경을 위한 시점 설정
watch();
sec =( 60 - now.getSeconds())*1000;
alert(sec)
setTimeout(startTimeInterval,sec);
}
window.onload = function(){
initTime();
}
</script>
</head>
<body>
<div class="clock">
<h3>시계</h3>
<p><span id="time">PM 12:00</span></p>
</div>
</body>
</html>
시간은 로컬 피씨의 시간으로 표시됩니다.(자바스크립트는 로컬브라우저에서 작동되는 프로그램이므로..)
개념 - 웹페이지 로드시 로컬피씨와의 시간을 동기화 한다. 초단위의 정보를 가져와서 동기화하여 분이 바뀌는 시점에서
웹페이지의 시계 역시 동일하게 바뀌도록 로직을 구성한다.
<html>
<head>
<script>
var now = new Date();
function watch(){
hour = now.getHours();
min = now.getMinutes();
if(min<10)
min = "0"+min;
var ampm;
if (now.getHours() <= 12) {
apm = "오전";
}else {
apm = "오후";
}
document.getElementById("time").innerHTML = apm + " " + hour + ":" + min;
}
function startTimeInterval(){ //처음 분변경이후부터 60초마다 분변경
watch();
t = setInterval('watch()', 60000)
}
function initTime(){ //처음 로드시 남은 초를 계산하여 다음 분으로 변경을 위한 시점 설정
watch();
sec =( 60 - now.getSeconds())*1000;
alert(sec)
setTimeout(startTimeInterval,sec);
}
window.onload = function(){
initTime();
}
</script>
</head>
<body>
<div class="clock">
<h3>시계</h3>
<p><span id="time">PM 12:00</span></p>
</div>
</body>
</html>