728x90
반응형
✅오늘의 과제
➰전화 걸기 버튼을 누르면 2초 뒤에 이름과 전화번호 출력하기
➰코드
day10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day10</title>
<style>
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#phone {
position: relative;
width: 20%;
height: 20%;margin-top: 50px;
margin-left: 600px;
}
#number {
position: absolute;
top: 160px;
left: 645px;
width: 15%;
height: 45%;
}
#btn {
position: absolute;
background-color: white;
border: none;
top: 500px;
left: 700px;
width: 120px;
height: 50px;
font-size: 50px;
}
#name {
display: none;
position: absolute;
font-family: 'Cafe24Ssurround';
font-size: 40px;
top: 200px;
left: 700px;
}
#phoneNum {
display: none;
position: absolute;
font-family: 'Cafe24Ssurround';
background-color: darkgreen;
padding: 10px;
border-radius: 30px;
font-size: 25px;
top: 400px;
left: 646px;
}
</style>
</head>
<body>
<div>
<img id="phone" src="./img/phone.png">
<img id="number" src="./img/number.png">
<button type="button" id="btn">📞</button>
<p id="name">김만두</p>
<span id="phoneNum">010-1234-5678</span>
</div>
<script src="day10.js"></script>
</body>
</html>
day10.js
function btnclicked() {
document.getElementById('number').style.display = "none";
document.getElementById('btn').style.display = "none";
document.getElementById('name').style.display = "block";
document.getElementById('phoneNum').style.display = "block";
}
function call() {
setTimeout("btnclicked()", 2000);
}
document.getElementById('btn').addEventListener('click', call)
코드 설명
숫자 키패드 이미지의 id를 number라고 하고, 📞이모티콘이 적힌 버튼의 id를 btn, 수신자 이름의 id를 name, 수신자 핸드폰 번호의 id를 phoneNum이라고 했다.
첫 화면에서는 name, phoneNum의 display속성을 none으로 설정하여 보이지 않게 한다. btnclicked() 함수는 number, btn의 display속성을 none으로 설정하고 name, phoneNum의 display속성을 block으로 설정해서 보이던 것을 안 보이게, 안보이던 것을 보이게 한다.
call() 함수는 setTimeout() 함수를 이용하여 btnclicked() 함수를 2초 있다가 실행하도록 한다.
addEventListener를 이용하여 btn이 클릭되면 call() 함수를 호출하게 했다.
결론적으로 btn이 클릭되면 call() 함수가 실행되고, btnclicked() 함수를 2초 있다가 실행하게 되는 것이다.
➰코드실행화면(https://jsday10.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day10
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
728x90
반응형
'WEB > JS' 카테고리의 다른 글
| [JS] 12. 과제 - 챗봇 만들기 2일차(태그 제어 → 배경색 변경) (0) | 2021.09.29 |
|---|---|
| [JS] 11. 과제 - 챗봇 만들기 1일차(조건문 → 값 전달) (0) | 2021.09.29 |
| [JS] 10-1. 이벤트 (0) | 2021.09.29 |
| [JS] 9-2. 과제 - 객체 (0) | 2021.09.29 |
| [JS] 9-1. 객체 (0) | 2021.09.29 |
