生成随机颜色
方法1：RGB模式
function randomColor1() { var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); //在控制器中显示出随机生成的颜色(可以删除,无影响) console.log("rgb("+r+","+g+","+b+")"); //返回随机生成的颜色 return "rgb("+r+","+g+","+b+")"; }
方法2：随机生成6位[0-9]进行拼接
function randomColor2() { var str1="#"; for (var i=0;i<6;i++) { str1+=Math.floor(Math.random()*9); } //在控制器中显示出随机生成的颜色(可以删除,无影响) console.log(str1); //返回随机生成的颜色 return str1; }
自动随机切换页面颜色
采用定时器，每300毫秒调用一次。
//存放定时器的变量 var timer; //创建定时器，自动修改背景颜色 function createTimer(){ //创建定时器，并调用方法randomColor1(可修改为randomColor2) timer=window.setInterval(function(){ //获取body var body1=document.getElementsByTagName("body"); //修改body的背景样式 body1[0].style.backgroundColor=randomColor1(); },300); //定时器开启,自动修改背景按钮，不可用 停止自动修改背景 可用 var but1=document.getElementById("but3"); but1.disabled=false; var but2=document.getElementById("but4"); but2.disabled=true; } //清除定时器 function clearTimer(){ //清除定时器 window.clearInterval(timer); //定时器开启,自动修改背景按钮，可用 停止自动修改背景，不可用 var but1=document.getElementById("but3"); but1.disabled=true; var but2=document.getElementById("but4"); but2.disabled=false; }
实现页面背景颜色随机改变（完整代码）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function (){ //页面开始随机切换页面背景(随机色) createTimer(); } //按钮1:切换颜色不同方法 function but1(strColor){ //获取body节点 var body1=document.getElementsByTagName("body"); //修改body的背景颜色 body1[0].style.backgroundColor=strColor; } //生成随机数：RGB模式 function randomColor1() { var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); //在控制器中显示出随机生成的颜色(可以删除,无影响) console.log("rgb("+r+","+g+","+b+")"); //返回随机生成的颜色 return "rgb("+r+","+g+","+b+")"; } //生成随机色2:随机生成6位[0-9]进行拼接 function randomColor2() { var str1="#"; for (var i=0;i<6;i++) { str1+=Math.floor(Math.random()*9); } //在控制器中显示出随机生成的颜色(可以删除,无影响) console.log(str1); //返回随机生成的颜色 return str1; } //存放定时器的变量 var timer; //创建定时器，自动修改背景颜色 function createTimer(){ //创建定时器，并调用方法randomColor1(可修改为randomColor2) timer=window.setInterval(function(){ //获取body var body1=document.getElementsByTagName("body"); //修改body的背景样式 body1[0].style.backgroundColor=randomColor1(); },300); //定时器开启,自动修改背景按钮，不可用 停止自动修改背景 可用 var but1=document.getElementById("but3"); but1.disabled=false; var but2=document.getElementById("but4"); but2.disabled=true; } //清除定时器 function clearTimer(){ //清除定时器 window.clearInterval(timer); //定时器开启,自动修改背景按钮，可用 停止自动修改背景，不可用 var but1=document.getElementById("but3"); but1.disabled=true; var but2=document.getElementById("but4"); but2.disabled=false; } </script> </head> <body> <button id="but1" onclick="but1(randomColor2())">手动修改背景1</button> <button id="but2" onclick="but1(randomColor2())">手动修改背景2</button><br/> <button id="but3" onclick="clearTimer()">停止自动修改背景</button> <!--disabled 标签不可用 true|false--> <button id="but4" onclick="createTimer()">自动修改背景</button> </body> </html>