码迷,mamicode.com
首页 > 编程语言 > 详细

javascript随机变色--案例

时间:2019-10-15 00:21:23      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:style   获取   fun   order   ret   思考   alt   val   tin   

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

技术图片

 

代码如下: 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>随机变色</title>
 6     <style type="text/css">
 7         #box{
 8             width: 200px;
 9             height: 200px;
10             border: 1px solid red;
11         }
12     </style>
13 </head>
14 <body>
15 
16 <div id="box"></div>
17 <script type="text/javascript">
18     // 获取元素对象
19     var obj1 = document.getElementById("box");
20     // 给元素添加属性
21     obj1.style.background = rgb(255,255,0); // 注意:添加的属性类型 是字符串类型 !!!
22 </script>
23 </body>
24 </html>

 

2.思考:如何随机变换div块的背景颜色

  • 添加随机函数
  • 颜色的表示方式  rgb(随机数,随机数,随机数)
  • 添加多次定时器
 1 <body>
 2 
 3 <div id="box"></div>
 4 <script type="text/javascript">
 5     // 获取元素对象
 6     var obj1 = document.getElementById("box");
 7     // 给元素添加属性
 8     // obj1.style.background = ‘rgb(255,255,0)‘;
 9 
10     // 多次定时器
11     setInterval(function(){
12         obj1.style.background = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
13     },200);
14 
15     // 随机函数
16     function rand(n,m){
17         return Math.floor(Math.random()*(m-n+1));
18     }
19 </script>
20 </body>

 

javascript随机变色--案例

标签:style   获取   fun   order   ret   思考   alt   val   tin   

原文地址:https://www.cnblogs.com/pjcd-32718195/p/11674773.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!