javascript随机变色实例代码-偶像资源网

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>

以上代码非常简单，大家可以尝试运行下，感谢大家的学习和对的支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

javascript随机变色实例代码

请登录后发表评论