-
JQuery를 활용한 색깔 변화[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 14. 20:10728x90
JQuery를 활용한 색깔 변화
결과
박스를 클릭하면 색이 자동으로 변하게 만들었습니다.
코드
jquery를 사용할 예정이니 CDN을 연결해준다.
1. div를 이용하여 박스를 하나 만들어 줍니다.
<style> div { width: 100px; height: 100px; } </style> </head> <body> <div style="background-color: red" onclick="changeColor()"></div> </body>2. onClick시 실행할 함수 설정
<script> function changeColor() { setTimeout(function () { $("div").attr("style", "background-color: orange "); }, 0); setTimeout(function () { $("div").attr("style", "background-color: yellow"); }, 2000); setTimeout(function () { $("div").attr("style", "background-color: blue"); }, 4000); setTimeout(function () { $("div").attr("style", "background-color: purple"); }, 6000); } </script>여기서 setTimeout()함수는 JS에서 비동기적인 방식으로 지정된 시간 이후에 함수를 실행하는 함수로 일정시간이 지난 후에 한번만 실행되며, 지정된 시간(밀리초 단위)이 경과된 후에 콜백함수를 호출한다.
- setTimeout(callback, delay);
- callback : 지정된 시간 후에 실행될 함수를 나타낸다.
- delay : 함수 실행까지의 지연시간(밀리초)를 나타낸다.
- $("div").attr("style", "background-color: orange");
- div 태그의 스타일 속성에서 배경색을 orange로 선언하는 코드이다.
3. 색상이 변화할때 애니메이션을 통해 부드럽게 변화하게 지정
<style> div { width: 100px; height: 100px; transition: background-color 2s ease; /*2초동안 애니메이션을 진행하며, ease함수를 사용하여 부드럽게 변화하게 지정*/ } </style>
728x90'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글
[포스코x코딩온] Bootstrap (0) 2023.07.15 jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기 (0) 2023.07.14 jquery를 활용한 버튼 클릭 시 이미지 전환 (0) 2023.07.14 [포스코x코딩온] JQuery의 기초 (0) 2023.07.14 [포스코x코딩온] 표준객체, 요소 다루기, 이벤트 (0) 2023.07.13 - setTimeout(callback, delay);