Create a HTML page Template which background color changes with time.
Click to Down lode changing color HTML template with source code
to create this page you need to
1.download jquery-2.0.0.min.js jQuery
2. Embed above jquery in your HTML page
<script src="jquery-2.0.0.min.js">
3. using script tag embed following java script in your page
.<script language="javascript">
$(document).ready(function(){
$("#pramod").css('width','980px');
$("#pramod").css('height','600px');
var x=0;
var y=0;
var z=0;
setInterval(function(){
$("#pramod").css('background-color','rgb(' +x+ ',' +y+','+z+')');
setInterval(function() {
x+=10;
y+=1;
z+=10;
},1000);
},1000);
});
</script>
$("#pramod").css('width','980px');
$("#pramod").css('height','600px');
var x=0;
var y=0;
var z=0;
setInterval(function(){
$("#pramod").css('background-color','rgb(' +x+ ',' +y+','+z+')');
setInterval(function() {
x+=10;
y+=1;
z+=10;
},1000);
},1000);
});
</script>
Explanation :
in this tutorial we have used rgb( , ,) function to set background color to the HTML tag
What is rgb() function ?
as we know basic colors are three red , Green and Blue
all other color are developed by this three color. in rgb() is a function and it has three parameters we have to provide in numbers the minimum value is 0 and highest is 255
so if we set bgcolor= rgb(0,0,0); then it will be black it may change on monitor resolution .
in above task x ,y ,z are three variable represent red, green and blue value in rgb as rgb(x,y,z);
using loop the value is increased using jquery time interval is set .
The you can download Complete code by clicking following link
Click to Down lode changing color HTML template with source code
<html>
<head>
<title>sample</title>
<script src="jquery-2.0.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#pramod").css('width','980px');
$("#pramod").css('height','600px');
var x=0;
var y=0;
var z=0;
setInterval(function(){
$("#pramod").css('background-color','rgb(' +x+ ',' +y+','+z+')');
setInterval(function() {
x+=10;
y+=1;
z+=10;
},1000);
},1000);
});
</script>
</head>
<body bgcolor="orange">
<div id="pramod">
</div>
</body>
</html>
<head>
<title>sample</title>
<script src="jquery-2.0.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#pramod").css('width','980px');
$("#pramod").css('height','600px');
var x=0;
var y=0;
var z=0;
setInterval(function(){
$("#pramod").css('background-color','rgb(' +x+ ',' +y+','+z+')');
setInterval(function() {
x+=10;
y+=1;
z+=10;
},1000);
},1000);
});
</script>
</head>
<body bgcolor="orange">
<div id="pramod">
</div>
</body>
</html>
Solved by :Pramod Slave
MCA IMSCDR Ahmednagar
HTML5 CSS3 Sesson