ReactJs의 색상 주기

34679 단어 reactjavascript
app idea

Youtube Speed Code

기본 아이디어는 0.25초마다 16진수 색상 값을 증가시키는 것입니다.
16진수 색상은 RGB:(00에서 FF까지의 빨강, 녹색, 파랑)으로 구성됩니다.
따라서 완전한 16진수 코드에는 6개의 문자가 있습니다.

상태 정의:


   const [state,setState]=useState({
       red:"00",
       blue:"00",
       green:"00",
       start:"Start"

   });



start는 애니메이션이 시작되었는지 여부를 확인하는 것입니다.

입력 및 제출 양식:

 <form onSubmit={handleSubmit} >
           <center > 
            <input placeholder="Red"  value={state.red} name="red" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Green" value={state.green} name="green" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Blue" value={state.blue} name="blue" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            </center>
            <center> 
            <button type="submit" name="Submit" value={state.start}>{state.start}</button>
            </center> 
            </form>



red , green , blue 값을 업데이트하기 위한 handleInput:


const handleInput=e=>{
       const value=e.target.value;

       setState({
           ...state,
          [e.target.name]:value
       });

       console.log(value)
   }


제출 시 주어진 입력이 유효한 16진수인지 확인하고 사용자에게 경고해야 합니다.

function isHex(x){
   if(x.length!==2)return 1;
   var re=/[0-9A-Fa-f]{2}/g;
   if(re.test(x))
   return 0;
   return 1;
}
......

......

const handleSubmit=e=>{
       e.preventDefault();
       if(state.start==="Start")setState({
        ...state,
       start:"Stop"
    });
    else setState({
        ...state,
       start:"Start"
    });
       var msg="";
     if(isHex(state.red))
     {
         msg+="Red should be between 00 and FF\n";
     }
     if(isHex(state.blue))
     {
         msg+="Blue should be between 00 and FF\n";
     }
     if(isHex(state.green))
     {
         msg+="Green should be between 00 and FF\n";
     }
     if(msg.length!==0)
     {
         alert(msg)
     }

   }


.25sec의 setInterval을 사용하여 rgb를 업데이트하고 배경을 변경합니다.

useEffect(()=>{
    var intervalId;
    if(state.start==="Stop")
    {
       intervalId=setInterval(()=>{
         var hex= state.red+state.green+state.blue;
         var dec=hextodec(hex);
         const red=dec.substring(0,2);
         const green=dec.substring(2,4);
         const blue=dec.substring(4)
         setState({
             ...state,
            red:red,
            green:green,
            blue:blue
         });
       },25) 
    }

     return ()=>clearInterval(intervalId);

   },[state])
.....
.....
.....

function hextodec(x)
{

    var n=parseInt(x,16);
    n+=1;

    return n.toString(16).padStart(6,'0');
}



style={{backgroundColor:`#${state.red+state.green+state.blue}`}}



최종 App.js는


import React ,{useState,useEffect}from 'react'
import './App.css'
export default function App() {

   const [state,setState]=useState({
       red:"00",
       blue:"00",
       green:"00",
       start:"Start"

   });
   useEffect(()=>{
    var intervalId;
    if(state.start==="Stop")
    {
       intervalId=setInterval(()=>{
         var hex= state.red+state.green+state.blue;
         var dec=hextodec(hex);
         const red=dec.substring(0,2);
         const green=dec.substring(2,4);
         const blue=dec.substring(4)
         setState({
             ...state,
            red:red,
            green:green,
            blue:blue
         });
       },25) 
    }

     return ()=>clearInterval(intervalId);

   },[state])
   const handleInput=e=>{
       const value=e.target.value;

       setState({
           ...state,
          [e.target.name]:value
       });

       console.log(value)
   }
   const handleSubmit=e=>{
       e.preventDefault();
       if(state.start==="Start")setState({
        ...state,
       start:"Stop"
    });
    else setState({
        ...state,
       start:"Start"
    });
       var msg="";
     if(isHex(state.red))
     {
         msg+="Red should be between 00 and FF\n";
     }
     if(isHex(state.blue))
     {
         msg+="Blue should be between 00 and FF\n";
     }
     if(isHex(state.green))
     {
         msg+="Green should be between 00 and FF\n";
     }
     if(msg.length!==0)
     {
         alert(msg)
     }
     else{




     }  
   }
    return (
        <div style={{backgroundColor:`#${state.red+state.green+state.blue}`,height:"100vh",width:"100vw"}}>
             <div style={{backgroundColor:state.start==="Stop"?'white':'grey'}}>
            <center><h1 style={{backgroundColor:'white'}}>COLOR CYCLE</h1></center>

           <form onSubmit={handleSubmit} >
           <center > 
            <input placeholder="Red"  value={state.red} name="red" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Green" value={state.green} name="green" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Blue" value={state.blue} name="blue" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            </center>
            <center> 
            <button type="submit" name="Submit" value={state.start}>{state.start}</button>
            </center> 
            </form>
            </div>
        </div>
    )
} 
function isHex(x){
   if(x.length!==2)return 1;
   var re=/[0-9A-Fa-f]{2}/g;
   if(re.test(x))
   return 0;
   return 1;
}
function hextodec(x)
{

    var n=parseInt(x,16);
    n+=1;

    return n.toString(16).padStart(6,'0');
}


고맙습니다

좋은 웹페이지 즐겨찾기