728x90
03. 자바스크립트의 내장 객체를 사용한 문제 I
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
1. 현재 시각을 브라우저에 표시하는 프로그램을 작성한다.
2. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.
3. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드를 실행하여 currentTime 변수에 저장한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVA SCRIPT 문제 3</title>
<style>
p {
margin-top:20px;
font-size:1.2em;
text-align: center;
}
.display {
font-size:1.5em;
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p>현재 시각 <span id="current" class="display"></span></p>
<script>
setInterval(displayNow, 1000); // 1초마다 시간 계산 함수 실행
function displayNow() { // 시간 계산 함수
// 코드를 작성하세요
document.querySelector("#current").innerHTML = currentTime;
}
</script>
</body>
</html>결과 화면
A. 해설
1. 현재 시각을 브라우저에 표시하는 프로그램을 작성한다.
2. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.
--> var 예약어로 now 변수를 만들고, new 예약어로 Date( ) 인스턴스를 생성한다.
3. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드를 실행하여 currentTime 변수에 저장한다.
--> var 예약어로 currentTime 변수를 만들고, Date 객체 안에 있는 toLocalTimeString( ) 함수를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVA SCRIPT 문제 3</title>
<style>
p {
margin-top:20px;
font-size:1.2em;
text-align: center;
}
.display {
font-size:1.5em;
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p>현재 시각 <span id="current" class="display"></span></p>
<script>
setInterval(displayNow, 1000); // 1초마다 시간 계산 함수 실행
function displayNow() { // 시간 계산 함수
var now = new Date();
var currentTime = now.toLocaleTimeString();
document.querySelector("#current").innerHTML = currentTime;
}
</script>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > JavaScript 문제 풀이' 카테고리의 다른 글
| 06. 새로운 요소 추가하기 (0) | 2022.08.29 |
|---|---|
| 05. DOM 에 접근하기 (0) | 2022.08.29 |
| 04. 자바스크립트의 내장 객체를 사용한 문제 II (0) | 2022.08.24 |
| 02. 함수 선언하고 호출하는 문제 II (0) | 2022.08.16 |
| 01. 함수 선언하고 호출하는 문제 I (0) | 2022.08.16 |