1. 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>JavaScript Clock</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="clock">
<div class="today" id="today"></div>
<div class="time" id="time"></div>
</div>
<script src="./script.js"></script>
</body>
</html>2. css 코드
*{
box-sizing: border-box;
font-size: 32px;
}
body{
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 700px;
height: 700px;
}
.clock{
border: 1px solid white;
border-radius: 10px;
width: 400px;
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.today, .time{
color: white;
width: 270px;
height: 50px;
}
.time{
width: 240px;
}3. js 코드
const todayDiv = document.getElementById("today")
const timeDiv = document.getElementById("time")
function getTime(){
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
month = month < 10 ? `0${month}` : month
date = date < 10 ? `0${date}` : date
hour = hour < 10 ? `0${hour}` : hour
minute = minute < 10 ? `0${minute}` : minute
second = second < 10 ? `0${second}` : second
todayDiv.textContent = `${year}년 ${month}월 ${date}일`
timeDiv.textContent = `${hour}시 ${minute}분 ${second}초`
}
getTime()
setInterval(getTime, 1000)4. 결과
블로그 이전했습니다 -> https://young-code.tistory.com