javascript随机变色实例代码

Z时代
2024-01-10
分类：综合

1.打开网页，网页效果如图所示

代码如下：


<!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块的背景颜色

添加随机函数

颜色的表示方式 rgb(随机数，随机数，随机数)

添加多次定时器


<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);
 // 随机函数
 function rand(n,m){
  return Math.floor(Math.random()*(m-n+1));
 }
</script>
</body>