JavaScript 背景顏色隨機變化
本章節(jié)分享一段代碼實例，它實現(xiàn)div元素背景顏色隨機變化效果。
代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>實例</title>
<style>
#antzone{
width:100px;
height:100px;
}
</style>
<script>
window.onload=function(){
var oDv=document.getElementById('antzone');
oDv.style.backgroundColor='red';
setInterval(function(){
var arrRandNumber = [
getRandomNumber(0,255),
getRandomNumber(0,255),
getRandomNumber(0,255)
];
oDv.style.backgroundColor='rgb('+arrRandNumber.toString()+')'
function getRandomNumber(rMin,rMax){
return Math.floor(rMin+Math.random()*(rMax-rMin));
}
},500)
};
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>上面的代碼實現(xiàn)了隨機背景色效果，下面介紹一下它的實現(xiàn)過程。
一.代碼注釋：
（1）.window.onload=function(){}，當(dāng)文檔內(nèi)容完全加載完畢再去執(zhí)行函數(shù)中的代碼。
（2）.var oDv=document.getElementById('antzone')，獲取id屬性值為antzone的元素對象。
（3）.oDv.style.backgroundColor='red'，設(shè)置div最初的背景色為紅色。
（4）.setInterval(function(){}，500）,每隔500毫秒變換一次背景色。
（5）.var arrRandNumber = [
getRandomNumber(0,255),
getRandomNumber(0,255),
getRandomNumber(0,255)
]，生成隨機rgb顏色值，存入數(shù)組。
（6）.oDv.style.backgroundColor='rgb('+arrRandNumber.toString()+')'，設(shè)置背景色。
arrRandNumber.toString()將數(shù)組轉(zhuǎn)換為字符串，默認(rèn)情況下元素之間用逗號連接。
（7）.function getRandomNumber(rMin,rMax){
return Math.floor(rMin+Math.random()*(rMax-rMin));
}，獲取指定區(qū)間的隨機數(shù)。
二.相關(guān)閱讀：
（1）.setInterval()參閱JavaScript setInterval()一章節(jié)。
（2）.Math.floor()方法參閱JavaScript Math.floor()一章節(jié)。
（3）.Math.random()方法參閱JavaScript Math.random()一章節(jié)。
相關(guān)推薦
-
js map集合簡單代碼實例
本章節(jié)分享一段代碼實例，它模擬紅絲線了m集合的功能。代碼實例如下:vr M = function (){ /************基礎(chǔ)變量**************/ vr hs
-
javascript計算字符串長度代碼實例
下面分享一段代碼實例，它實現(xiàn)了計算字符串長度的效果。并且能夠區(qū)分中英文，代碼實例如下:function DLngth(fD){ vr intLngth=0 for (vr i=
-
微信隱藏網(wǎng)頁右上角按鈕js代碼實例
直接看代碼，因為非常的簡單，沒啥好說的:WixinJsBridg.cll(hidOtionMnu);Wixini的地址是github/zxli/Wixini。
-
微信分享網(wǎng)頁鏈接至朋友、朋友圈、微博代碼
下面是一段簡單的分享鏈接功能的代碼，需要的朋友可以做一下參考。代碼如下:vr linLink = ../.., imgUrl = ../.., shrTitl = 頁面標(biāo)題, dsc
-
js微信窗口關(guān)閉事件簡單代碼實例
下面就是一個簡單的演示代碼片段:WixinJSBridg.invok(closWindow,{},function(rs){ //lrt(rs.rr_msg); });Wixin
