반응형
아래 코드는 버튼을 클릭할 때마다 문자열과 배경을 변경하는 자바스크립트 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>랜덤 문구 + 배경색 예제</title>
</head>
<body style="text-align:center; padding:50px;">
<h2 id="msg">버튼을 눌러보세요 😀</h2>
<button onclick="changeRandom()">클릭</button>
<script>
function changeRandom() {
// 문구 배열
const messages = [
"안녕하세요!",
"반가워요 😃",
"오늘도 좋은 하루 되세요 🌸",
"JavaScript 재미있죠?",
"클릭해주셔서 감사합니다 🙏",
"행운이 가득하길 바랍니다 🍀"
];
// 랜덤 문구 선택
const randomMsg = messages[Math.floor(Math.random() * messages.length)];
document.getElementById("msg").innerHTML = randomMsg;
// 랜덤 배경색 생성 (RGB 값 랜덤)
const randomColor = `rgb(${Math.floor(Math.random()*256)},
${Math.floor(Math.random()*256)},
${Math.floor(Math.random()*256)})`;
document.body.style.backgroundColor = randomColor;
}
</script>
</body>
</html>
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: onload 이벤트, 웹페이지나 특정 요소가 로드된 후 발생 (0) | 2025.08.20 |
|---|---|
| 자바스크립트: onchange 이벤트, 값이 변경될 때 발생 (0) | 2025.08.20 |
| 자바스크립트: 이벤트 속성 종류 (1) | 2025.08.19 |
| 자바스크립트: 요소(element) 선택 getElementById getElementsByClassName .. (8) | 2025.08.18 |
| 자바스크립트: 로그인 페이지 만들기 (4) | 2025.08.17 |