728x90
반응형
문제 1
현재 시간을 받아오는 코드를 작성하시오
▶ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
text-align: center;
margin-top: 30px;
}
.time {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="t">현재 시각 <span class="time"></span></div>
</div>
</body>
</html>
<script>
setInterval(now, 1000);
function now() {
var time = new Date();
var obj = document.querySelector('.time');
obj.innerHTML = time.toLocaleTimeString(); //time 클래스에 직접 값을 넣는다.
}
</script>
▶ 출력 결과
문제 2
문제 1을 응용하여 팝업 이벤트를 가진 버튼을 추가하여 코드를 작성하시오.
▶ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
text-align: center;
}
button {
padding: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="container">
<button onclick="popTime()">현재 시간 보기</button>
</div>
</body>
</html>
<script>
function popTime() {
window.open("script1.html", "time", "width=500px, height=200px, left=800px, top=300px");
// 여러 개 뜨는 걸 방지
}
</script>
▶ 출력 결과
- 버튼을 누르면 해당 창이 팝업으로 나온다.
728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [Vue & AJAX & Spring] UP&DOWN (0) | 2023.08.02 |
|---|---|
| [JavaScript] 회원 가입 스크립트 추가 (32일차) (0) | 2023.06.29 |
| [JavaScript] 배열 내용을 테이블로 출력 (32일차) (0) | 2023.06.29 |
| [JavaScript] 텍스트 사라지게 만들기 (31일차) (0) | 2023.06.28 |
| [JavaScript] 자바스크립트 sum 함수 만들기 (31일차) (0) | 2023.06.28 |