프로젝트 2: JavaScript 시계

5370 단어 webdevprogrammingjavascriptbeginners
제 "30일 동안 30개의 Js 프로젝트 빌드"시리즈에 오신 것을 환영합니다. 오늘은 2일차이자 프로젝트 2입니다. 이 시리즈의 다른 기사를 읽지 않은 경우 먼저 확인하십시오. 나는 이 기사의 끝에 그것들을 나열할 것이다.

내 이전 기사에서 언급했듯이. Wes Bos Javascript30 course 2일차 챌린지 입니다.

최종 결과는 다음과 같습니다.


시작하기 전에 항상 그렇듯이 here 에서 시작 파일을 다운로드하십시오. 스타터 파일을 다운로드하는 방법에 대한 별도의 기사를 작성했는데 확인하실 수 있습니다.

파트 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>Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <div class="hand hour-hand" id="hour"></div>
    <div class="hand min-hand" id="min" ></div>
    <div class="hand sec-hand" id="sec"></div></div>
<script src="script.js"></script>
</body>
</html>

파트 2: CSS



이제 우리는 프로젝트의 스타일을 지정할 것입니다.

*{
    margin:0;
    padding:0;
}
body{
    background-color: rgb(33, 33, 36);
    display: flex;
    justify-content: center;
}
.container{
    border:20px solid white;
    border-radius: 50%;
    position: absolute;
    margin-top: 8rem;
    height:25vw;
    width: 25vw;
    transition: ease-in-out;

}
.hand{
    position: relative;
    top: 50%;
    width:47%;
    left:3%;
    height: 0.6rem;
    background-color: white;
    transform: rotate(90deg);
    transform-origin: 100%;

}
.hour-hand,.sec-hand,.min-hand {
   position: absolute;
}


핸드 클래스의 스타일링 부분을 살펴보자

.hand{
    position: relative;
    top: 50%;
    width:47%;
    left:3%;
    height: 0.6rem;
    background-color: white;
    transform: rotate(90deg);
    transform-origin: 100%;

}


시계 경계인 컨테이너에 대해 바늘을 배치할 수 있도록 위치가 상대적으로 설정되었습니다. 그런 다음 손의 중심에 맞게 상단과 너비를 쉽게 설정할 수 있습니다.
핸드 클래스는 시침, 분침, 초침 모두 공통 클래스입니다. 우리는 transform(90deg)을 사용하여 12시 방향에서 모든 바늘을 시작했습니다(div 콘텐츠는 기본적으로 수평이기 때문에).

여기에서 transform:origin 은 변환을 적용할 때 사용되었으며 회전 손은 중심(기본값)에서 회전하므로 끝에서 회전하려면 원점을 100%로 설정합니다.

우리가 직면하게 될 한 가지 문제는 div가 기본적으로 블록 속성이기 때문에 3개의 손이 블록 형식으로 표시된다는 것입니다. 이 문제를 해결하기 위해 개별 손 클래스에서 position:absolute를 사용할 것입니다.

.hour-hand,.sec-hand,.min-hand {
   position: absolute;
}


스태킹 div 부분에 대한 자세한 내용은 this을 참조하십시오.

파트 3:자바스크립트



이제 프로젝트를 대화형으로 만들 것입니다.

여기서 아이디어는 시, 분, 초의 변화에 ​​따라 각 핸드 클래스의 transform:rotate 속성을 변경하고 setInterval() 함수를 사용하여 매 초마다 각 함수를 반복해서 호출하는 것입니다.

시침에 대한 기능을 살펴보겠습니다.

function changeHour(){
    let hour=document.getElementById('hour');
    let hangle;
    if(date.getHours()<12)
    {   
        hangle=(date.getHours()*30);
    }
    else hangle=(date.getHours()-12)*30+90;
    hour.style.transform=`rotate(${hangle}deg)`;
}


여기서는 두 가지 경우를 살펴보겠습니다. 시간이 12보다 작으면 시침이 매시간 30도씩 움직일 때 간단히 30도를 곱하고 처음에 시침이 90도에 있을 때 90도에 더합니다. 시간이>=12이면 12를 뺍니다.
다음은 예입니다. getHours()에서 반환된 시간이 1(오전 1시)이면 시침은 1*(360/12)도가 됩니다.
13이 반환되면(오후 1시) (13-12)*(360/12)는 30도를 제공합니다.

min 및 sec에도 동일한 논리가 적용됩니다.

function changeMin(){
    date=new Date();
    let min=document.getElementById('min');
    let mangle=date.getMinutes()*6+90;  
    min.style.transform=`rotate(${mangle}deg)`;
}
function changeSec(){
    date=new Date();
    let sec=document.getElementById('sec');
    let sangle=date.getSeconds()*6;
    sangle+=90;   
    sec.style.transform=`rotate(${sangle}deg)`;
}


이제 우리는 매초마다 이 함수를 호출해야 합니다.
여기서 우리는 setInterval(function, time interval in milisecond)을 사용할 것입니다. 이 함수는 closeInterval()이 닫힐 때까지 두 번째 매개변수로 전달된 시간 간격 이후 매개변수로 전달된 함수를 계속 호출합니다. 실행에.

setInterval(changeSec,1000);
setInterval(changeMin,1000);
setInterval(changeHour,1000);


이 시리즈의 이전 기사:



배운 것:



1. div 쌓기
2.변환-원점

소스 코드



Feel free to suggest changes

결론



오늘의 프로젝트는 여기까지입니다. 다음 프로젝트는 CSS 변수에 대한 것입니다.

의심 사항이나 제안 사항이 있으면 의견 섹션에 알려주십시오. 기꺼이 당신과 소통하겠습니다.

이 시리즈가 마음에 들고 그 일부가 되고 싶다면

읽어 주셔서 감사합니다. :)
CodeFirst 모델링: DataAnotation
API Route를 사용하여 프런트에서 GraphiQL 서버에 액세스하는 [Next.js]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage