이 기사 예제는 JS에 의해 웹 배경색을 무작위로 생성하는 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> JS 특수 효과 무작위로 생성 된 웹 페이지 배경 색상 </title>
<스타일>
.30pt {font-size : 30pt; color :#de3076}
</스타일>
<script language = "javaScript">
<!-
색상 = 새 배열 ( "0", "3", "6", "9", "C", "F");
속도 = 250;
document.bgcolor = "fffff";
bg = 새로운 배열 ( "ffffff", "ffffff", "ffffff");
함수 시작 () {
document.form.col1.value = "x"; document.form.col2.value = "x";
document.form.col3.value = "x"; i = 0; 롤 (속도);
}
기능 롤 (Speedb) // 휠 롤
{
if (document.form.col1.value == "x") {
document.form.c1.value = document.form.b1.value;
document.form.b1.value = document.form.a1.value;
document.form.a1.value =
색상 [Math.round (Math.random ()*10)%6]+
색상 [Math.round (Math.random ()*10)%6]; // 랜덤 함수를 사용하여 휠에서 색상 값을 생성합니다.
}
if (document.form.col2.value == "x") {
document.form.c2.value = document.form.b2.value;
document.form.b2.value = document.form.a2.value;
document.form.a2.value =
색상 [Math.round (Math.random ()*10)%6]+
색상 [Math.round (Math.random ()*10)%6];
}
if (document.form.col3.value == "x") {
document.form.c3.value = document.form.b3. value;
document.form.b3.value = document.form.a3.value;
document.form.a3.value =
색상 [Math.round (Math.random ()*10)%6]+
색상 [Math.round (Math.random ()*10)%6];
}
settimeout ( "roll ("+speedb+")", speedb);
}
함수 정지 (col) // 휠이 롤링을 중지합니다
{
if (col == 1) {document.form.col1.value = ""; i ++;}
if (col == 2) {document.form.col2.value = ""; i ++;}
if (col == 3) {document.form.col3.value = ""; i ++;}
if (i == 3) {
bg [0] = document.form.a1.value+
document.form.a2.Value+
document.form.a3. value;
bg [1] = document.form.b1.value+
document.form.b2.value+
document.form.b3. value;
bg [2] = document.form.c1.value+
document.form.c2.value+
document.form.c3. value;
speedb = 500000; roll (speedb);
}
}
기능보기 (문자) // 색상 미리보기
{
document.bgcolor = bg [Letter];
document.form.color.value = "#"+bg [Letter];
}
->
</스크립트>
</head>
<centre>
<br> <br> <br> <br>
<양식 이름 = "form">
<테이블 cellPadding = 2 테두리 = 1>
<tr> <td align = center>
<입력 유형 = 텍스트 이름 = "a1"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 텍스트 이름 = "a2"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 텍스트 이름 = "a3"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 버튼 onclick = "View (0)"value = "preview"> <br>
<입력 유형 = 텍스트 이름 = "b1"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 텍스트 이름 = "b2"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 텍스트 이름 = "b3"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 버튼 onclick = "View (1)"value = "preview"> <br>
<입력 유형 = 텍스트 이름 = "c1"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 텍스트 이름 = "c2"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 텍스트 이름 = "c3"size = 3 onfocus = "this.blur ()"value = "">
<입력 유형 = 버튼 onclick = "보기 (2)"value = "preview"> <br>
<입력 유형 = 버튼 onclick = "stop (1)"value = "x"name = "col1">
<입력 유형 = 버튼 onclick = "stop (2)"value = "x"name = "col2">
<입력 유형 = 버튼 onclick = "stop (3)"value = "x"name = "col3">
</td>
<td valign = middle align = center>
<입력 유형 = 버튼 onclick = "시작 ()"value = "start!"> <p>
<테이블 bgcolor = fffff 테두리 = 1 셀 스페이싱 = 0>
<tr> <td align = center valign = middle> 프레스 "x"를 누르면 휠이 회전하지 않습니다 ... <p>
bg color = <입력 유형 = 텍스트 크기 = 7 값 = "#ffffff"name = color>
</td> </tr>
</테이블>
</td> </tr>
</테이블>
</form>
</센터>
<테이블 클래스 = 30pt>
<tr> <td> 랜덤 생성 색상
</tr> <tr> <td> 시작 버튼과 오른쪽 시작의 바퀴 3 줄을 누릅니다.
</tr> <tr> <td> 세 개의 X 버튼을 눌러 색상 값을 설정합니다.
</tr> <tr> <td> 미리보기 버튼을 눌러 색상 효과가 나타납니다
</tr>
</테이블> <p>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.