按时替换颜色

最新推荐文章于 2025-06-09 08:15:00 发布

weixin_30716725

最新推荐文章于 2025-06-09 08:15:00 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kPedestrian/p/5768128.html

本文介绍了一种使用JavaScript实现的功能，能够每隔固定时间自动为指定类名的HTML元素更换随机背景颜色。通过定义一系列颜色值并运用随机算法，该方法为网页增添了动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**

* 按时替换元素背景颜色

* @parem string element 元素class名称

* @parem number time 相隔时间

**/

 1 function getbgcolor(element,time) {
 2             var element = document.getElementsByClassName(element);
 3             var colorArr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','f'];
 4             _this = this;
 5             _this.time = time;
 6 
 7             this.getcolor = function () {
 8                 var bgcolor = '';
 9                 var i = 6;
10                 while (i) {
11                     bgcolor += colorArr[Math.floor(Math.random()*15)];
12                     i--;
13                 }
14                 return bgcolor;
15                 
16             }
17 
18             _this.rand = function () {
19                 var eleIndex = [];
20                 for (var i=0; i<element.length; i++) {
21                     eleIndex.push(i);
22                 }
23                 return eleIndex;
24             }
25 
26             _this.getRand = function (num) {
27                 var val = [];
28                 for (var i=0; i<num; i++) {
29                     val.push(_this.rand()[Math.floor(Math.random()*element.length)]);
30                 }
31                 return val;
32             }
33 
34             _this.addcolor = function () {
35                 var retval = _this.getRand(2);
36                 for(var i=0; i<retval.length; i++) {
37                     // (function (age) {
38                         // setTimeout(function () {
39                             element[retval[i]].style.background = '#'+_this.getcolor();
40                         // },1000);
41                     // })(i);
42                 }
43             }
44 
45             _this.settime = function () {
46                 setInterval(function () {
47                     _this.addcolor();
48                 },_this.time);
49             }
50             _this.settime();
51         }
52         new getbgcolor('article',3000);