반응이 있는 디지털 시계

ReactJs를 사용한 지 5일이 지나면 간단한 디지털 시계를 만듭니다.

사용된 글꼴: digital-7

이 프로젝트를 통해 나는 useEffect()와 setInterval()을 사용하는 방법을 배웠다.

시간, 분, 초 및 날짜에 대해 네 가지 useState()를 사용했습니다.

    const [hours,setHours]=useState("00");
    const [minutes,setMinutes]=useState("00");
    const [seconds,setSeconds]=useState("00");
    const [date,setDate]=useState("date");

우리는 자바 스크립트에서 현재 날짜를 얻을 수 있습니다.
new Date()
그래서 let d=new Date()를 만들어 관련 내용을 추출하고 모든 변수를 설정했습니다.

useEffect(
()=>{
    const intervalId= setInterval(()=>{
    let d=new Date();
    var h=d.getHours().toString();
    var m=d.getMinutes().toString();
    var s=d.getSeconds().toString();
    var z=d.getDate().toString()+" / "
          +(d.getMonth()+1).toString()+" / "
          +d.getFullYear();

    setDate(z);
    setHours(h);
    setMinutes(m);
    setSeconds(s);

    return () => clearInterval(intervalId); 
    },1000);
},[seconds,minutes,hours,date]);

완료한 줄 알았는데 시간이 24시간 형식이므로 h=(h%12)||12;까지 12시간으로 변경했습니다.padstart(2,'0');를 사용하여 처음에 0을 채웠습니다.

일부 JSX를 반환했으므로 이제 App.js의 전체 코드는 다음과 같습니다.

import React ,{useState,useEffect}from 'react';
import './App.css'

export default function App() {

    const [hours,setHours]=useState("00");
    const [minutes,setMinutes]=useState("00");
    const [seconds,setSeconds]=useState("00");
    const [date,setDate]=useState("date");

    useEffect(
()=>{
    const intervalId= setInterval(()=>{
    let d=new Date();
    var h=d.getHours();
    var m=d.getMinutes().toString();
    var s=d.getSeconds().toString();
    h=(h%12)||12;
    h=h.toString();
    var z=d.getDate().toString().padStart(2,'0')+" / "
    +(d.getMonth()+1).toString().padStart(2,'0')+" / "+d.getFullYear();
    setDate(z);
    setHours(h.padStart(2,'0'));
    setMinutes(m.padStart(2,'0'));
    setSeconds(s.padStart(2,'0'));


    return () => clearInterval(intervalId); 
    },1000);
},[seconds,minutes,hours,date]);

    return (
        <div>
            <h1>Digital Clock</h1>
            <hr/>
            <h1 className="date">{date}</h1>
           <h1 className="glow">{hours}
           :{minutes}
           :{seconds}</h1>

        </div>
    )
}

이제 스타일 지정으로 이동합니다. App.css

검은색 배경, 녹색 디지털 시계 및 오늘 날짜가 포함된 가져온 디지털 글꼴

@font-face{
    font-family:'digital-7';
    src: local('digital-7'),url('./fonts/digital-7.ttf')format('truetype');
   }

body{
   background-color: black; 

}
h1
{  font-family:'digital-7';
    font-size: 80px;
    color: #32cd32;
    text-align: center;
}
.date{


    letter-spacing: 4px;

        position: fixed;
        top: 80%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);
}
.glow {


    letter-spacing: 4px;

        position: fixed;
        top: 50%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);

  }

따라서 최종 출력은 이 게시물의 썸네일처럼 보입니다.

내 속도 코드를 확인할 수 있습니다


Day5의 #100DaysOfCode.