[Javascript 실습] 16장 마무리 문제
2024. 3. 12. 17:14ㆍJavascript
■ 1번 문제 : 결과 화면 처럼 현재 시각을 브라우저에 표시하는 프로그램을 작성하려고 한다. 조건을 참고하여 비어있는 코드를 채울것
1. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장
2. Date 객체의 메소드 중에서 지역 시간 정보를 알려 주는 메소드를 실행해서 currentTime 변수에 저장
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현재 시각은?</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);
function displayNow(){
// 해답부분
var now = new Date();
var currentTime = now.toLocaleTimeString();
document.querySelector("#current").innerHTML = currentTime;
}
</script>
</body>
</html>
■ 2번 문제 : [현재 시간 보기] 버튼을 클릭하면 현재 시간이 있는 current.html 파일을 팝업 창으로 나타나게 하시오. 이 때 팝업창의 높이는 400px, 높이는 200px이고 브라우저의 중앙에 보이게 함.
1. 화면의 너빗값에서 팝업 창의 너빗값을 빼고 2로 나누면, 팝업창이 시작할 가로 좌표을 만들 수 있음
2. 마찬가지로 화면의 높잇값에서 팝업창의 높잇값을 빼고 2로 나누면, 팝업창이 시작할 세로 좌표를 만들 수 있음
3. 이렇게 만들어진 팝업창의 좌표와 팝업창의 크기 width,height를 하나의 문자열로 저장
4. window.open() 메소드를 실행하여 팝업창을 보여줌
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현재 시간 보기</title>
<style>
#container{
width:200px;
margin:50px auto;
}
button {
border:1px solid #ccc;
background:#fff;
padding:20px 30px;
}
</style>
</head>
<body>
<div id="container">
<button id="bttn">현재 시간 보기</button>
</div>
<script>
document.getElementById('bttn').onclick = displayTime; // 버튼 클릭하면 displayTime 함수 실행
function displayTime(){
// 해답부분
var left_margin = (screen.availWidth - 400) / 2;
var top_margin = (screen.availHeight - 200) / 2;
var opt = "left="+left_margin+",top="+top_margin+",width="+400+",height="+200;
window.open("current.html","",opt);
}
</script>
</body>
</html>'Javascript' 카테고리의 다른 글
| [Javascript] 10. DOM에서 노드 추가·삭제 (0) | 2024.03.19 |
|---|---|
| [Javascript] 9. 문서 객체 모델 (0) | 2024.03.18 |
| [Javascript] 8. 브라우저와 관련된 객체2 (0) | 2024.03.12 |
| [Javascript] 7. 브라우저와 관련된 객체1 (0) | 2024.03.12 |
| [Javascript] 6. 객체 (0) | 2024.03.11 |