Want background colour rotation?
There are multiple ways of doing this, but today I will show you 3 ways how to do it in JavaScript using the jQuery library.
* Method 1, Create yourself a webpage in html, for example: index.html
Using jQuery 3.1.1, so add this to your head section https://code.jquery.com/jquery-3.1.1.min.js
Now copy the script below and put it in between some script tags,
This will rotate colours from white to black at 1 second intervals,
It's set for the body to change colour, so any body colour with rotate colours, it also include transparency so you can have between 0.00 - 1.00,
You can also edit the colour ranges it uses, any number between 0 - 255.
var rgba = function() {
return 'rgba(' +
Math.ceil(Math.random() * 255) + ',' +
Math.ceil(Math.random() * 255) + ',' +
Math.ceil(Math.random() * 255) + ',' +
(Math.random().toPrecision(1)) + ')';
};
setInterval(function() {
$('body').css('background-color',rgba());
},1000);
Here is a link with the script for you.
* Method 2 of changing a background/element colour.
Simply copy the code below and paste on to your webpage.
This also uses a button to change the colour.
$( document ).ready(function(){
$( "#colourchanger" ).on( "click" , function(){
var color = '#'+Math.floor( Math.random()*16777215 ).toString( 16 );
$( "body" ).css( {"background-color" : color } );})});
Here is a link with the script for you.
* Method 3 of changing a background/element colour using pad
Simply copy the code below and paste on to your webpage.
This also uses a button to change the colour.
function pad(s,i,c,r){ i=i+1-s.length;
if(i<1)return s;
c=new Array(i).join(c||" ");
return r?s+c:c+s;
};
pad("6",6,"6");
pad("0",0,"0",true);
$( document ).ready(function(){
$( "#colourchanger" ).on( "click" , function(){
var color = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"6")
$( "body" ).css( {"background-color" : color } );})});
Here is a link with the script for you.
