HTML, CSS 및 JavaScript를 사용하여 실시간으로 변화하는 디지털 시계 구축
14417 단어 javascripthtmlwebdevcss
이 자습서에서는 현재 시간과 날짜를 표시하는 간단한 실시간 변경 디지털 시계를 구축하는 방법에 대해 설명합니다.
HTML, CSS 및 JS를 사용하여 디지털 시계를 만드는 방법
프로젝트의 HTML 마크업을 설정하는 것부터 시작하겠습니다.
clock라는 폴더를 만듭니다. 이 폴더 안에 index.html , styles.css 및 main.js 의 세 파일을 만듭니다. 그런 다음 아래와 같이 두 개의 다른 파일을 index.html 파일에 연결합니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
또는 위의 코드를
index.html 파일에 복사하거나 Codepen에서 이 프로젝트의 코드를 가져올 수 있습니다.시계용 HTML 마크업
디지털 시계의 HTML 마크업은 매우 간단합니다. id가
h1인 date-time 요소로 둘러싸인 div 요소로 구성됩니다.<div id="clock">
<h1 id="date-time"></h1>
</div>
JavaScript를 가져오지 않으면 디지털 시계에 아무 것도 표시되지 않습니다.
시계에 JavaScript 추가
이 시점에서 디지털 시계에 생명을 불어넣기 위해 JavaScript를 작성할 것입니다.
main.js 파일로 이동하여 다음 코드를 붙여넣습니다.
Please read the comments in the code for further clarification.
window.addEventListener("load", () => {
clock();
function clock() {
const today = new Date();
// get time components
const hours = today.getHours();
const minutes = today.getMinutes();
const seconds = today.getSeconds();
//add '0' to hour, minute & second when they are less 10
const hour = hours < 10 ? "0" + hours : hours;
const minute = minutes < 10 ? "0" + minutes : minutes;
const second = seconds < 10 ? "0" + seconds : seconds;
//make clock a 12-hour time clock
const hourTime = hour > 12 ? hour - 12 : hour;
// if (hour === 0) {
// hour = 12;
// }
//assigning 'am' or 'pm' to indicate time of the day
const ampm = hour < 12 ? "AM" : "PM";
// get date components
const month = today.getMonth();
const year = today.getFullYear();
const day = today.getDate();
//declaring a list of all months in a year
const monthList = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
//get current date and time
const date = monthList[month] + " " + day + ", " + year;
const time = hourTime + ":" + minute + ":" + second + ampm;
//combine current date and time
const dateTime = date + " - " + time;
//print current date and time to the DOM
document.getElementById("date-time").innerHTML = dateTime;
setTimeout(clock, 1000);
}
});
CSS로 시계 스타일 지정
앱을 더 매력적으로 만들기 위해 몇 가지 CSS 스타일을 앱에 추가해 보겠습니다.
/*font family from google fonts*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap");
html {
font-size: 62.5%; /*62.5% = 10px; to make it easier to calculate REM units.*/
}
body {
text-align: center;
font-family: "Oswald", sans-serif;
font-weight: 300;
font-size: 2.2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #faedcd;
height: 100vh;
}
#clock {max-width: 600px;}
/* for smaller screens below 700px */
@media only screen and (max-width: 700px) {
body {font-size: 1.8rem;}
}
/*for smaller screens below 300px*/
@media only screen and (max-width: 300px) {
body {font-size: 1.6rem;}
}
최종적으로 디지털 시계 앱의 모습과 동작 방식은 다음과 같습니다.
결론
이 튜토리얼이 도움이 되었기를 바랍니다. 댓글을 남겨주시고 이 글이 마음에 드셨다면 저를 팔로우 해주세요.
Reference
이 문제에 관하여(HTML, CSS 및 JavaScript를 사용하여 실시간으로 변화하는 디지털 시계 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/dboateng/build-a-real-time-changing-digital-clock-using-html-css-javascript-689
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Please read the comments in the code for further clarification.
window.addEventListener("load", () => {
clock();
function clock() {
const today = new Date();
// get time components
const hours = today.getHours();
const minutes = today.getMinutes();
const seconds = today.getSeconds();
//add '0' to hour, minute & second when they are less 10
const hour = hours < 10 ? "0" + hours : hours;
const minute = minutes < 10 ? "0" + minutes : minutes;
const second = seconds < 10 ? "0" + seconds : seconds;
//make clock a 12-hour time clock
const hourTime = hour > 12 ? hour - 12 : hour;
// if (hour === 0) {
// hour = 12;
// }
//assigning 'am' or 'pm' to indicate time of the day
const ampm = hour < 12 ? "AM" : "PM";
// get date components
const month = today.getMonth();
const year = today.getFullYear();
const day = today.getDate();
//declaring a list of all months in a year
const monthList = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
//get current date and time
const date = monthList[month] + " " + day + ", " + year;
const time = hourTime + ":" + minute + ":" + second + ampm;
//combine current date and time
const dateTime = date + " - " + time;
//print current date and time to the DOM
document.getElementById("date-time").innerHTML = dateTime;
setTimeout(clock, 1000);
}
});
/*font family from google fonts*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap");
html {
font-size: 62.5%; /*62.5% = 10px; to make it easier to calculate REM units.*/
}
body {
text-align: center;
font-family: "Oswald", sans-serif;
font-weight: 300;
font-size: 2.2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #faedcd;
height: 100vh;
}
#clock {max-width: 600px;}
/* for smaller screens below 700px */
@media only screen and (max-width: 700px) {
body {font-size: 1.8rem;}
}
/*for smaller screens below 300px*/
@media only screen and (max-width: 300px) {
body {font-size: 1.6rem;}
}
Reference
이 문제에 관하여(HTML, CSS 및 JavaScript를 사용하여 실시간으로 변화하는 디지털 시계 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dboateng/build-a-real-time-changing-digital-clock-using-html-css-javascript-689텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
