728x90
페이지 끝나면 함수 자동 실행
window.onload = function(){
}
바디태그에 접근
document.bodybody와 head는 문서에 하나밖에 없어야 하므로 id없이 접근 가능
바디에 색깔주기
document.body.style.backgroundColor = "rgb(255,0,0)"색깔줄때 rgb(red, green, blue) 함수 사용가능(실제 내부적으로 사용됨)
페이지 새로고침시마다 다른 색이 나오게끔 변경
<script>
function f_ranNum() {
return Math.floor(Math.random() * 256); // 0~255 return
}
function f_ranColor() {
return "rgb(" + f_ranNum() + "," + f_ranNum() + "," + f_ranNum() + ")"
}
window.onload = function () { // 페이지 끝나면 함수 자동 실행
// 바디태그에 접근하기
// body와 head는 문서에 하나밖에 없어야 하므로 id없이 접근 가능
document.body.style.backgroundColor = f_ranColor();
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function f_ranNum() {
return Math.floor(Math.random() * 256); // 0~255 return
}
function f_ranColor() {
return "rgb(" + f_ranNum() + "," + f_ranNum() + "," + f_ranNum() + ")"
}
window.onload = function () { // 페이지 끝나면 함수 자동 실행
// 바디태그에 접근하기
// body와 head는 문서에 하나밖에 없어야 하므로 id없이 접근 가능
document.body.style.backgroundColor = f_ranColor();
}
</script>
</body>
</html>
rgb대신 #ff0000 이런식으로 표현 가능(16진수)
document.body.style.backgroundColor = "#ff0000";
16진수를 사용하여 랜덤한 색 생성하기
1) 16진수를 담은 배열 생성
var v_hexaNum = [];
for (i = 0; i <= 9; i++) {
v_hexaNum[v_hexaNum.length] = i;
}
v_hexaNum[v_hexaNum.length] = "a";
v_hexaNum[v_hexaNum.length] = "b";
v_hexaNum[v_hexaNum.length] = "c";
v_hexaNum[v_hexaNum.length] = "d";
v_hexaNum[v_hexaNum.length] = "e";
v_hexaNum[v_hexaNum.length] = "f";2) 랜덤으로 숫자 생성
function f_hexaNum() {
var v_ranIndex = Math.floor(Math.random() * v_hexaNum.length);
return v_hexaNum[v_ranIndex];
}3) 랜덤 색상 생성
function f_ranColor2() {
var v_hexaColor = "#";
for (var i = 1; i <= 6; i++) {
v_hexaColor += f_hexaNum();
}
return v_hexaColor;
}더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 페이지 새로고침 (곧 방문자가 방문할 때 마다 다른색이 나오게)
function f_ranNum(){
return Math.floor(Math.random()*256); // 0~255 return
}
function f_ranColor(){
return "rgb(" + f_ranNum() + "," + f_ranNum() + "," + f_ranNum() + ")";
}
var v_hexaNum=[]; // 16진수를 담을 배열, 0~9, a,b,c,d,e,f
for(i=0; i<=9; i++){
v_hexaNum[v_hexaNum.length] = i;
}
v_hexaNum[v_hexaNum.length] = "a";
v_hexaNum[v_hexaNum.length] = "b";
v_hexaNum[v_hexaNum.length] = "c";
v_hexaNum[v_hexaNum.length] = "d";
v_hexaNum[v_hexaNum.length] = "e";
v_hexaNum[v_hexaNum.length] = "f";
//배열에 잘 담겼는지 확인
function f_hexaNum(){
var v_ranIndex = Math.floor(Math.random()* v_hexaNum.length);
return v_hexaNum[v_ranIndex];
}
function f_ranColor2(){
var v_hexaColor = "#";
for(var i=1; i<=6; i++){
v_hexaColor += f_hexaNum();
}
return v_hexaColor; // 완성된 16진수 문자열 리턴
}
window.onload = function(){
// body와 head는 문서에 하나밖에 없어야 하므로 id없이 접근 가능
// 색깔줄때 rgb 함수 사용가능(실제 내부적으로 사용됨)
//document.body.style.backgroundColor = f_ranColor();
document.body.style.backgroundColor = "#0000ff";
}
</script>
</body>
</html>
1초마다 페이지 색상변경
onload 함수 밖으로 빼기
window.onload = function(){
document.body.style.backgroundColor = "#0000ff";
}위의 함수를 아래와 같이 분리
function f_myBack() {
document.body.style.backgroundColor = f_ranColor2();
setTimeout(f_myBack, 1000);
}
window.onload = f_myBack;더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 페이지 새로고침 (곧 방문자가 방문할 때 마다 다른색이 나오게)
function f_ranNum(){
return Math.floor(Math.random()*256); // 0~255 return
}
function f_ranColor(){
return "rgb(" + f_ranNum() + "," + f_ranNum() + "," + f_ranNum() + ")";
}
var v_hexaNum=[]; // 16진수를 담을 배열, 0~9, a,b,c,d,e,f
for(i=0; i<=9; i++){
v_hexaNum[v_hexaNum.length] = i;
}
v_hexaNum[v_hexaNum.length] = "a";
v_hexaNum[v_hexaNum.length] = "b";
v_hexaNum[v_hexaNum.length] = "c";
v_hexaNum[v_hexaNum.length] = "d";
v_hexaNum[v_hexaNum.length] = "e";
v_hexaNum[v_hexaNum.length] = "f";
//배열에 잘 담겼는지 확인
function f_hexaNum(){
var v_ranIndex = Math.floor(Math.random()* v_hexaNum.length);
return v_hexaNum[v_ranIndex];
}
function f_ranColor2(){
var v_hexaColor = "#";
for(var i=1; i<=6; i++){
v_hexaColor += f_hexaNum();
}
return v_hexaColor; // 완성된 16진수 문자열 리턴
}
function f_myBack(){
// body와 head는 문서에 하나밖에 없어야 하므로 id없이 접근 가능
// 색깔줄때 rgb 함수 사용가능(실제 내부적으로 사용됨)
//document.body.style.backgroundColor = f_ranColor();
//alert(f_ranColor2()); // 형식확인
document.body.style.backgroundColor = f_ranColor2();
setTimeout(f_myBack,1000)
}
window.onload = f_myBack;
</script>
</body>
</html>