ManyCodes.com codes & scripts Get free programming codes and tutorials!

28Jul/090

How to make your website have randomly change its background color

Here is how you can make your website have randomly change its background color.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!-- this script is from www.manycodes.com -->
<script>
 
// Select fade-effect below:
// Set 1 if the background may fade from dark to medium
// Set 2 if the background may fade from light to medium
// Set 3 if the background may fade from very dark to very light light
// Set 4 if the background may fade from light to very light
// Set 5 if the background may fade from dark to very dark
var fade_effect=3
 
// What type of gradient should be applied Internet Explorer 5x or higher?
// Set "none" or "horizontal" or "vertical"
var gradient_effect="horizontal"
 
// Speed higher=slower
var speed=60
 
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
 
var browserinfos=navigator.userAgent
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie4||ie5||ns4||ns6||opera
 
if (fade_effect==1) {
 var darkmax=1
 var lightmax=127
}
if (fade_effect==2) {
 var darkmax=127
 var lightmax=254
}
if (fade_effect==3) {
 var darkmax=1
 var lightmax=254
}
if (fade_effect==4) {
 var darkmax=190
 var lightmax=254
}
if (fade_effect==5) {
 var darkmax=1
 var lightmax=80
}
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
 
var newred
var newgreen
var newblue
var oldred
var oldgreen
var oldblue
 
var redcol_1
var redcol_2
var greencol_1
var greencol_2
var bluecol_1
var bluecol_2
var oldcolor
var newcolor
var firsttime=true
  
var stepred=1
var stepgreen=1
var stepblue=1
 
function setrandomcolor() {
 var range=(lightmax-darkmax)
 if (firsttime) {
 newred=Math.ceil(range*Math.random())+darkmax
 newgreen=Math.ceil(range*Math.random())+darkmax
 newblue=Math.ceil(range*Math.random())+darkmax
 firsttime=false
 }
  
 oldred=Math.ceil(range*Math.random())+darkmax
 oldgreen=Math.ceil(range*Math.random())+darkmax
 oldblue=Math.ceil(range*Math.random())+darkmax
  
 stepred=newred-oldred
 if (oldred>newred) {stepred=1}
 else if (oldred<newred) {stepred=-1}
 else {stepred=0}
  
 stepgreen=newgreen-oldgreen
 if (oldgreen>newgreen) {stepgreen=1}
 else if (oldgreen<newgreen) {stepgreen=-1}
 else {stepgreen=0}
  
 stepblue=newblue-oldblue
 if (oldblue>newblue) {stepblue=1}
 else if (oldblue<newblue) {stepblue=-1}
 else {stepblue=0}
 fadebg()
}
 
function fadebg() {
 if (newred==oldred) {stepred=0}
 if (newgreen==oldgreen) {stepgreen=0}
 if (newblue==oldblue) {stepblue=0}
 newred+=stepred
 newgreen+=stepgreen
 newblue+=stepblue
  
 if (stepred!=0 || stepgreen!=0 || stepblue!=0) {
 redcol_1 = hexc[Math.floor(newred/16)];
 redcol_2 = hexc[newred%16];
 greencol_1 = hexc[Math.floor(newgreen/16)];
 greencol_2 = hexc[newgreen%16];
 bluecol_1 = hexc[Math.floor(newblue/16)];
 bluecol_2 = hexc[newblue%16];
 newcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
 if (ie5 && gradient_effect!="none") {
 if (gradient_effect=="horizontal") {gradient_effect=1}
 if (gradient_effect=="vertical") {gradient_effect=0}
 greencol_1 = hexc[Math.floor(newred/16)];
 greencol_2 = hexc[newred%16];
 bluecol_1 = hexc[Math.floor(newgreen/16)];
 bluecol_2 = hexc[newgreen%16];
 redcol_1 = hexc[Math.floor(newblue/16)];
 redcol_2 = hexc[newblue%16];
 var newcolorCompl="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
 document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolorCompl+", endColorstr="+newcolor+" GradientType="+gradient_effect+")"
 }
 else {
 document.bgColor=newcolor
 }
 var timer=setTimeout("fadebg()",speed);
 }
 else {
 clearTimeout(timer)
 newred=oldred
 newgreen=oldgreen
 newblue=oldblue
 oldcolor=newcolor
 setrandomcolor()
 }
}
 
if (browserok) {
 window.onload=setrandomcolor
}
</script>
 
<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/category/java/javascript-codes/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>



Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Ask
  • Facebook
  • Technorati
  • YahooBuzz