이 기사의 예에서는 JavaScript를 사용하여 버튼을 클릭하여 웹페이지의 배경색을 전환하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
다음은 버튼을 클릭하여 배경색을 마음대로 변경하는 JavaScript의 데모입니다. 버튼을 클릭할 때마다 웹페이지의 배경색을 무작위로 변경할 수 있습니다. 색상 값은 미리 JS 배열에 저장되어 있습니다. 특정 색상을 원하지 않으면 해당 색상을 바꾸면 됩니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>通过按钮变换背景颜色</title>
</head>
<body>
<script language="javascript">
var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
var n=0;
function turncolors(){
if (n==(Arraycolor.length-1)) n=0;
n++;
document.bgColor = Arraycolor[n];
}
</script>
<form name="form1" method="post" action="">
<p>
<input type="button" name="Submit" value="变换背景" onclick="turncolors()">
</p>
<p>用按钮变换背景颜色.</p>
</form>
</body>
</html>
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
