javascript隨機變色實例代碼
更新時間：2019年10月15日 08:11:54 作者：入夢歸來
在本篇文章里小編給大家分享的是關(guān)于javascript隨機變色的相關(guān)實例內(nèi)容，需要的朋友們可以測試下。
1.打開網(wǎng)頁，網(wǎng)頁效果如圖所示
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隨機變色</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 獲取元素對象
var obj1 = document.getElementById("box");
// 給元素添加屬性
obj1.style.background = 'rgb(255,255,0)'; // 注意：添加的屬性類型 是字符串類型 ?。。?
</script>
</body>
</html>
2.思考：如何隨機變換div塊的背景顏色
- 添加隨機函數(shù)
- 顏色的表示方式 rgb(隨機數(shù)，隨機數(shù)，隨機數(shù))
- 添加多次定時器
<body>
<div id="box"></div>
<script type="text/javascript">
// 獲取元素對象
var obj1 = document.getElementById("box");
// 給元素添加屬性
// obj1.style.background = 'rgb(255,255,0)';
// 多次定時器
setInterval(function(){
obj1.style.background = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
},200);
// 隨機函數(shù)
function rand(n,m){
return Math.floor(Math.random()*(m-n+1));
}
</script>
</body>
以上代碼非常簡單，大家可以嘗試運行下，感謝大家的學(xué)習(xí)和對腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
這里給大家分享的是通過js腳本來控制頁面中的正方體轉(zhuǎn)動特效，用戶可以點擊按鈕向右轉(zhuǎn)動，也可以向下轉(zhuǎn)動，結(jié)合自己的需求控制即可。效果非常棒，這里推薦給大家2016-10-10
iFrame小應(yīng)用2008-12-12
JavaScript實現(xiàn)跑馬燈抽獎活動實例代碼解析與優(yōu)化（二）
這篇文章主要介紹了JavaScript實現(xiàn)跑馬燈抽獎活動實例代碼解析與優(yōu)化（二）的相關(guān)資料,需要的朋友可以參考下2016-02-02
js addDqmForPP給標(biāo)簽內(nèi)屬性值加上雙引號的函數(shù)
這篇文章主要介紹了js addDqmForPP給標(biāo)簽內(nèi)屬性值加上雙引號的函數(shù),需要的朋友可以參考下2016-12-12
用javascript動態(tài)注釋掉HTML代碼...2006-09-09
Google韓國首頁圖標(biāo)動畫效果...2007-08-08
這篇文章主要為大家詳細介紹了JavaScript初學(xué)者必看的“new”，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript數(shù)組分組groupBy示例詳解
JavaScript?最近發(fā)布了一個方法?Object.groupBy,可以對可迭代對象中的元素進行分組,這篇文章主要介紹了JavaScript數(shù)組分組groupBy示例,需要的朋友可以參考下2023-12-12
本文主要介紹了JS對象創(chuàng)建的幾種方式，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Web技術(shù)實現(xiàn)移動監(jiān)測的介紹
移動偵測，一般也叫運動檢測，常用于無人值守監(jiān)控錄像和自動報警。通過攝像頭按照不同幀率采集得到的圖像會被 CPU 按照一定算法進行計算和比較，當(dāng)畫面有變化時，如有人走過，鏡頭被移動，計算比較結(jié)果得出的數(shù)字會超過閾值并指示系統(tǒng)能自動作出相應(yīng)的處理2017-09-09