전화걸기 화면
2초 딜레이 후 글자 표시
버튼의 위치를 맨 아래에 고정하기 위해 DIV를 상단, 하단 두 개로 나눴다
오랜만에 CSS도 씀
HTML
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<title>ten</title>
<link rel="stylesheet" type="text/css" href="ten.css"/>
</head>
<body>
<div class="area">
<h1 class="name"></h1>
<h2 class="num"></h2>
</div>
<div class="area2">
<button class="call"></button>
</div>
<script src="./ten.js"></script>
</body>
</html>CSS
@font-face {
font-family: 'GowunBatang-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.area{
text-align:center;
vertical-align: middle;
width:230px;
height:200px;
background-color: lightgray;
}
.area2{
text-align:center;
width:230px;
height:150px;
background-color: lightgray;
}
.name{
font-family: 'GowunBatang-Regular';
}
.num{
font-family: 'GowunBatang-Regular';
}
.call{
margin:60px;
width:60px;
height:50px;
padding:10px;
border:none;
border-radius:50%;
background:url(./call.png) center no-repeat green;
background-size:40px;
}JS
function onClick(){
setTimeout(function(){
document.getElementsByClassName("name")[0].innerHTML="설화";
document.getElementsByClassName("num")[0].innerHTML="010-xxxx-xxxx";
},2000);
}
document.getElementsByClassName('call')[0].addEventListener('click', onClick);RESULT
'교육 > 2022 모각코 코뮤니티 2월과정 - js' 카테고리의 다른 글
| 모각코2월-JS-12일차-챗봇2:배경색 (0) | 2022.02.22 |
|---|---|
| 모각코2월-JS-11일차-챗봇1 (0) | 2022.02.21 |
| 모각코2월-JS-9일차-영화소개 (0) | 2022.02.18 |
| 모각코2월-JS-8일차-전광판 (0) | 2022.02.18 |
| 모각코2월-JS-7일차-스톱워치 (0) | 2022.02.18 |
