生成隨機顏色
方法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>