반응형
제이쿼리를 사용하여 웹 페이지의 배경색을 랜덤하게 변경하려면 다음과 같이 할 수 있습니다. 이 코드는 jQuery를 이용하여 버튼을 클릭하면 랜덤한 배경색이 적용되도록 만들어진 예제입니다.
먼저, HTML 파일을 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>랜덤 배경색 변경</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="changeColorButton">배경색 변경</button>
<script>
// 랜덤한 RGB 색상을 생성하는 함수
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 버튼 클릭 시 배경색 변경
$(document).ready(function() {
$("#changeColorButton").click(function() {
var randomColor = getRandomColor();
$("body").css("background-color", randomColor);
});
});
</script>
</body>
</html>위의 코드에서는 HTML에서 "배경색 변경" 버튼을 클릭할 때마다 getRandomColor 함수를 호출하여 랜덤한 RGB 색상을 생성하고, 그 색상을 <body> 요소의 배경색으로 설정합니다. jQuery를 사용하여 요소의 스타일을 변경하려면 css 함수를 사용합니다.
이렇게 하면 버튼을 클릭할 때마다 페이지의 배경색이 랜덤하게 변경됩니다.
반응형
'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 |
댓글