-
js_이벤트 실습_덜 된 코드...+ 완성!2학년/멋사 2023. 4. 6. 18:24
버블링 원 누르면 저 알림이뜨고
원 x 겉 네모 누르면
확인 누르면 저 메시지 창 그대로 펑 뜨고 취소누르면 암것도 안 뜨게 끔 하는 step1.
그리고
신호바꾸기 클릭 시
신호바꾸기 버튼 > 실행중 text
그린 꺼짐 , 노란색 켜짐 > 3초후 >
노란색 쩌짐 레드 켜짐 실행중 text 신호바꾸기 로 유지
되는 step2
결론부터 말하면
엄청어렵다!!
1. 나는 이제는 이전에 썻던 거 보고 쓰지말고 css연결 js연결쯤은 안 보고 하자 ...명령어 앞으로 많이 쓸건데 !
2.step2 알고리즘 생각
1. 신호바꾸기 버튼을 클릭> 실행 중 표시> 다시 신호바꾸기 버튼으로
2. box.addEvent('클릭시' ()=>{
신호바꾸기btn > 실행중
초록원 끄기,노란원 켜기(z index변경 )
몇초 기다리기
실 행중btn >신호바꾸기
노란원끄기, 빨간 원 켜기(z index변경)
만약 빨간 원이 켜져있따{
초록원 켜져있을때의 색을 반대로 해서 그대로
}
3. step2 이슈
1. css진짜 맘에안 듬 뭘 하면 다른게 이상해지고 그걸 곷미ㅕㄴ 또 다른게 이상해지고,.. 그래서 진짜 타협해서 신호등 위 아래 여백 불편한 것 + 실행중 옆에 못 가고 밑에 두자로 타협 ㅎㅎㅎㅎ
2. 위 로직 말고 스위치 써서 신호바꾸기 btn이 실행중이면 노란불 무조건 켜게 하고 빨초 구분은 temp써서 저장후그거 반대로 하게끔해야겠다 생각
3. 신호바꾸기 버튼만 1시간 했다 ㅎㅎ; setTimout 제대로 알았음.!진짜 문제는 신호등 light부분;;
저렇게 하면 일단 안된다.... 3시간째..... 왜 안되지 .....?이론상 되야하는 거 아니냐 !
진짜진짜 이거 왜안됨?!!!!!!?!??!??!?!??!
왜 안되는지는 모르겠다만,,,동시에 돌아가려면...뭔갈 잘못했었다...
그래도 멋사 강의자분 코드 따라하면서 하니까 다 하긴 했는데.....
쩝
오늘도 멋진 클론코딩 했씁니다
<!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>안녕하세요</title> <link rel ="stylesheet" href="./index.css"> <script src="./index.js" defer></script> </head> <body> <div class="wrap"> <div class="page1"> <div class="step1"> <h1>STEP1</h1> <div class="content"> <div class="emergencyBtn">버블링</div> </div> </div> <div class="Step2"> <h1>STEP2</h1> <div class="traffic"> <div class ="trafficLight"> <!-- 사용자 지정 속성 data-자기지정 이름 하면 됨. js코드를 보면 왜 필요한 지 알 수 있음--> <!-- 클래스에 띄어쓰기 하면 여러개 지정 가능 --> <div data-light ="green" class="light green lightActive"></div> <div data-light="yellow" class="light yellow"></div> <div data-light="red" class="light red"></div> </div> <div class="trafficBtn">신호바꾸기</div> </div> </div> </div> <div class="page2"> <div class="step4"> </div> <div class="Step5"> </div> </div> </div> <div class="step3"> <div class="pageSliderBtn preSliderBtn hiddenSliderBtn"> < 이전페이지 </div> <div class="pageSliderBtn nxtSliderBtn"> 다음페이지 > </div> </div> </body> </html>const content = document.querySelector('.content'); content.addEventListener('click',()=>{ if(confirm("위험해요!!! 그래도 누르시겠어요?")){ alert("펑!!!"); } }) const emergencyBtn = document.querySelector('.emergencyBtn'); emergencyBtn.addEventListener('click',(e)=>{ alert("버---블-----버---블"); /*버블링 방지 */ e.stopPropagation(); }) // dataset_light는 클래스 lightActive를 가지고 있는 애를 가져와라 소리 let lightActive=document.querySelector('.lightActive').dataset.light; const green = document.querySelector('.green'); const yellow = document.querySelector('.yellow'); const red = document.querySelector('.red'); const trafficBtn = document.querySelector('.trafficBtn'); let running =false; // light active속성을 css에서 opacity= 100주고 js에서 바꿔주는 알고리즘 // classList 로 클래스 줬다뺏다로 조작 많이함!! trafficBtn.addEventListener('click',()=>{ if(!running){ running = true; trafficBtn.textContent="실행중"; if(lightActive=='green'){ green.classList.remove('lightActive'); yellow.classList.add('lightActive'); setTimeout(()=>{ yellow.classList.remove('lightActive'); red.classList.add('lightActive'); lightActive='red'; trafficBtn.textContent='신호바꾸기'; running=false; },3000); } else if(lightActive =='red'){ red.classList.remove('lightActive'); yellow.classList.add('lightActive'); setTimeout(()=>{ yellow.classList.remove('lightActive'); green.classList.add('lightActive'); lightActive='green'; trafficBtn.textContent='신호바꾸기'; running=flase; },3000); } } }) const preSliderBtn =document.querySelector('.preSliderBtn'); const nxtSliderBtn =document.querySelector('.nxtSliderBtn'); const wrap = document.querySelector('.wrap'); let currentpage=1; nxtSliderBtn.addEventListener('click',()=>{ if(currentpage ==1){ wrap.style.transform ="translateX(-100vw)"; currentpage =2; nxtSliderBtn.classList.add("hiddenSliderBtn"); preSliderBtn.classList.remove("hiddenSliderBtn"); } }); preSliderBtn.addEventListener('click',()=>{ if(currentpage==2){ wrap.style.transform ="translateX(0)"; currentpage=1; preSliderBtn.classList.add("hiddenSliderBtn"); nxtSliderBtn.classList.remove("hiddenSliderBtn"); } });728x90'2학년 > 멋사' 카테고리의 다른 글
7주차실습_클론코딩_HIVELAB 홈페이지 따라하기!_css해주기1 (0) 2023.04.06 7주차실습_클론코딩_HIVELAB 홈페이지 따라하기!_구역나누기 (0) 2023.04.06 JS_Dom 구조 (0) 2023.04.04 3차시_CSS심화 (0) 2023.03.28 2차시_CSS_2 (0) 2023.03.23