javascript隨機(jī)變色實(shí)例代碼
1.打開網(wǎng)頁,網(wǎng)頁效果如圖所示

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隨機(jī)變色</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.思考:如何隨機(jī)變換div塊的背景顏色
- 添加隨機(jī)函數(shù)
- 顏色的表示方式 rgb(隨機(jī)數(shù),隨機(jī)數(shù),隨機(jī)數(shù))
- 添加多次定時(shí)器
<body>
<div id="box"></div>
<script type="text/javascript">
// 獲取元素對象
var obj1 = document.getElementById("box");
// 給元素添加屬性
// obj1.style.background = 'rgb(255,255,0)';
// 多次定時(shí)器
setInterval(function(){
obj1.style.background = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
},200);
// 隨機(jī)函數(shù)
function rand(n,m){
return Math.floor(Math.random()*(m-n+1));
}
</script>
</body>
以上代碼非常簡單,大家可以嘗試運(yùn)行下,感謝大家的學(xué)習(xí)和對腳本之家的支持。
相關(guān)文章
使用js實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了使用javascript實(shí)現(xiàn)數(shù)據(jù)格式化為字符串,非常的實(shí)用,這里推薦給有相同需求的小伙伴。2014-12-12
Js實(shí)現(xiàn)復(fù)選框的全選、全不選反選功能代碼實(shí)例
這篇文章主要介紹了Js實(shí)現(xiàn)復(fù)選框的全選、全不選和反選,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例
這篇文章主要為大家介紹了實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
JavaScript通過字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript通過字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法,實(shí)例分析了javascript動態(tài)調(diào)用函數(shù)的技巧,需要的朋友可以參考下2015-03-03
JS實(shí)現(xiàn)的字符串?dāng)?shù)組去重功能小結(jié)
這篇文章主要介紹了JS實(shí)現(xiàn)的字符串?dāng)?shù)組去重功能,結(jié)合實(shí)例形式分析了javascript基于ES6、ES5、ES3及正則實(shí)現(xiàn)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
layui下拉列表select實(shí)現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實(shí)現(xiàn)可輸入查找的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS如何使用正則表達(dá)式(match)截取括號中的文字和數(shù)字
正則表達(dá)式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關(guān)于JS如何使用正則表達(dá)式(match)截取括號中文字和數(shù)字的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
js 鼠標(biāo)拖動對象 可讓任何div實(shí)現(xiàn)拖動效果
js鼠標(biāo)拖動對象,可讓任何div實(shí)現(xiàn)拖動效果,需要的朋友可以參考下。2009-11-11

