자바스크립트의 date객체와 window객체를 이용하여 시계를 만들어보자.
date객체는 현재 날짜, 시간 등을 다룰수 있는 객체이고
window 객체 중 일정 시간마다 함수를 실행하는 setInterval(), 그리고 그것을 제거하는 clearInterval()을 사용하였다.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
</head>
<body>
<h2>시간을 출력하는 프로그램</h2>
<input type="button" onclick="startClock()" value="시작"></input> // 시작 버튼을 누르면 시계가 시작됨
<input type="button" onclick="stopClock()" value="멈춤"></input> // 멈춤 버튼을 누르면 clear됨
<div id="result"></div>
<script>
'use strict'
let timeId= null; // 빈 변수, setInterval, clearInterval을 실행할때 변수에 먼저 담아서 실행
// 시간을 출력하는 함수 function printTime(){
const date= new Date(); // 현재의 날짜와 시간이 저장된다.
const hh= date.getHours();
const mm= date.getMinutes();
const ss= date.getSeconds();
document.getElementById("result").innerHTML = hh+":"+mm+":"+ss // div안 HTML로 시간과 분, 초를 넣어준다.
}
function startClock(){
timeId=setInterval(printTime,1000) // 시간출력을 1초마다 반복하여 빈 변수에 저장한다.
}
function stopClock(){
clearInterval(timeId)
}
</script>
</body>
</html>
|
'개발자공부 (2021.11~현재) > JavaScript' 카테고리의 다른 글
| 자바스크립트로 만드는 로또번호 뽑기 프로그램 (0) | 2022.01.11 |
|---|---|
| 자바스크립트로 만드는 가위바위보 게임(무한반복) (0) | 2022.01.11 |
| 자바스크립트의 객체 생성 (0) | 2022.01.04 |
| 자바스크립트의 함수만들기 (0) | 2022.01.04 |
| for in문, for of 문 (0) | 2022.01.04 |