반응형
setInterval 함수를 사용하여 주기적으로 배경색을 변경하고, 페이드 효과를 적용할 수 있습니다. 아래는 그 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>자동 배경색 변경</title>
<style>
body {
transition: background-color 1s ease;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="startButton">시작</button>
<button id="stopButton">정지</button>
<script>
var intervalId;
// 랜덤한 RGB 색상을 생성하는 함수
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 배경색 변경 및 페이드 효과 적용
function changeBackgroundColorWithFade() {
var randomColor = getRandomColor();
$("body").css("background-color", randomColor);
}
// 페이지 로드 시 자동으로 시작
$(document).ready(function() {
intervalId = setInterval(changeBackgroundColorWithFade, 3000); // 3초마다 변경 (원하는 시간으로 조절 가능)
$("#startButton").click(function() {
intervalId = setInterval(changeBackgroundColorWithFade, 3000); // 시작 버튼 클릭 시 인터벌 시작
});
$("#stopButton").click(function() {
clearInterval(intervalId); // 정지 버튼 클릭 시 인터벌 정지
});
});
</script>
</body>
</html>
이 코드에서는 setInterval 함수를 사용하여 3초마다 changeBackgroundColorWithFade 함수가 호출되도록 설정되어 있으며, 해당 함수에서 배경색을 랜덤하게 변경하고 페이드 효과가 적용됩니다.
또한 페이지가 로드될 때 자동으로 시작하고, "시작" 버튼을 클릭하여 시작하거나 "정지" 버튼을 클릭하여 중지할 수 있습니다.
반응형
'SMART GPT' 카테고리의 다른 글
| JavaScript escape()와 unescape() (0) | 2023.09.28 |
|---|---|
| 자바스크립트 const 과 var 차이 (0) | 2023.09.28 |
| JavaScript에서 URL을 암호화하고 복호화하는 방법 (0) | 2023.09.28 |
| 스크립트 변수에 문자열 포함 확인 (0) | 2023.09.28 |
| CSS -webkit-min-device-pixel-ratio 속성 (0) | 2023.09.27 |
| 제이쿼리 랜덤으로 배경색 변경 (0) | 2023.09.27 |
| 클릭한 오디오만 재생되고 현재 재생 중인 오디오를 정지시키는 기능 (0) | 2023.09.26 |
| 웹 페이지에서 JavaScript 와 PHP를 사용하여 모바일 디바이스와 데스크톱 컴퓨터를 구분하는 방법 (0) | 2023.09.26 |
댓글