javascript随机变色实例代码

网络编程 2021-07-04 15:01www.168986.cn编程入门

在本篇文章里长沙网络推广给大家分享的是关于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>

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

上一篇：javascript网页随机点名实现过程解析下一篇：vue中axios的二次封装实例讲解

javascript随机变色实例代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

javascript随机变色实例代码

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设