✅ 오늘의 문제 : 전화걸기 버튼을 누르면 2초 뒤에 이름과 전화번호 출력하기
👉 예시
✅ 오늘의 문제 풀이 인증
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript10</title>
<script src="./10.js"></script>
<link rel="stylesheet" href="./10.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div id="phone_box">
<div id="num_box">
<h1>kakaotalk</h1>
<h2>친구 4</h2>
<ul class="num_list">
<li name="곰">
<div id="bear_box">
<a>🐾</a><a>곰돌이</a>
<img src="./img/phone.png" onclick="bear_click()">
</div>
</li>
<li name="냥">
<div id="cat_box"><a>😻</a><a>야옹이</a>
<img src="./img/phone.png" onclick="cat_click()">
</div>
<li name="댕">
<div id="dog_box">
<a>🐨</a><a>댕댕이</a>
<img src="./img/phone.png" onclick="dog_click()">
</div>
</li>
<li name="꺵">
<div id="rabbit_box">
<a>🐰</a><a>토깽이</a>
<img src="./img/phone.png" onclick="rabbit_click()">
</div>
</li>
</ul> </div>
</div>
</body><CSS>
body{
display: flex;
justify-content: center;
align-items: center;
margin-top: 5%;
color:#556677;
text-align: center;
font-family: 'Gamja Flower', cursive;
}
#phone_box{
border: 4px solid grey;
border-radius:35px;
width: 300px;
height: 500px;
background-color: black;
}
#display{
color: #556677;
font-size: 1.5rem;
}
.h1{
margin-top: 7rem;
line-height: 3rem;
font-size: 2.3rem;
}
h1{
margin-top: 3rem;
}
h2{
/* margin-top: 8rem; */
margin-top: 2rem;
}
img{
width: 40px;
height: 40px;
border-radius: 70%;
margin-left: 3rem;
}
ul.num_list li, ol.num_list li {
list-style: none;
width: 90%;
padding: 5px 0px 5px 5px;
margin-bottom: 3px;
border-bottom: 1px solid #e2e4e7;
font-size: 28px;
}
ul.num_list li:hover .btnBox{display: inline;}
img:hover {filter: brightness(50%); }
#num_box{
background-color:#9bbbd4;
width: 290px;
height: 430px;
border-radius: 7%;
display: block;
margin-lefgt:5px;
}<javascript>
let sec=0;
let min=0;
let hour=0;
let display_sec=0;
let display_min=0;
let display_hour=0;
function StartWatch(){
sec++;
if (sec==60){
min++;
sec=0;
if(min==60){
hour++;
min=0;
}
}
if (sec<10){
display_sec="0"+sec;
}
else{
display_sec=sec;
}
if (min<10){
display_min="0"+min;
}
else{
display_min=min;
}
if (hour<10){
display_hour="0"+hour;
}
else{
display_hour=hour;
}
document.getElementById('display').innerHTML=display_hour+":"+display_min+":"+display_sec;
}
//start버튼을 눌렀을 때
function start_click(){
repeat=setInterval(StartWatch,1000);
}
//stop버튼을 눌렀을 때
function stop_click(){
clearInterval(repeat);
}
//reset버튼을 눌렀을 때
function reset_click(){
dsec=0;
dmin=0;
dhour=0;
clearInterval(repeat);
document.getElementById('display').innerHTML="00:00:00"
}<결과화면>
✅ 오늘의 한마디
저번에 만들었던 스톱워치를 이용해서 전화 화면을 만들어봤습니다. 막히는 부분도 있었지만 구글 검색을 통해 스스로 해결해서 뿌듯합니다. 앞으로 더 열심히 해서 더 발전하고 싶습니다.
'웹 공부 > javascript' 카테고리의 다른 글
| 코딩 스터디(모각코) 12일차 - 한 입 웹개발(JS) (0) | 2021.07.28 |
|---|---|
| 코딩 스터디(모각코) 11일차 - 한 입 웹개발(JS) (0) | 2021.07.28 |
| 코딩 스터디(모각코) 9일차 - 한 입 웹개발(JS) (0) | 2021.07.20 |
| 코딩 스터디(모각코) 8일차 - 한 입 웹개발(JS) (0) | 2021.07.16 |
| 코딩 스터디(모각코) 7일차 - 한 입 웹개발(JS) (0) | 2021.07.13 |