Projavatricks: How To Automatically Change Background Colour Of Website Using JQuery

In this post we are going to show you how to give new look to your website each time when new visitor visits your website this can be done using simple jquery ,javascripting and css code.

How To Automatically Generate New Background Color:

This can be done using simple logic we have to generate three random numbers between 0 to 256 to create and colour in RGB format we can generate random number by following code.

var r = Math.floor((Math.random() * 255) + 1);

Then by using below code we can change the background colour of any component in our website.

$("body").css("background",'rgb('+r+','+g+','+b+')');

On every new visit or refresh it will change background colour of website.Thats it enjoy the code and must give your feedback.

How To Automatically Changed Fixed Background Colour:

By using below code we can generate random colours of our own choice so when ever visitor refresh your website he gets new look.

var col = ["#ff8080","#80ff80","#8080ff","#ff80df"];

var r = Math.floor((Math.random() * 3) + 1);

$("body").css("background",col[r]);

Thats it thankyou enjoy the code and must give your feedback.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function()
{

var r =  Math.floor((Math.random() * 255) + 1);
var g= Math.floor((Math.random() * 255) + 1);
var b = Math.floor((Math.random() * 255) + 1); 

$("body").css("background",'rgb('+r+','+g+','+b+')');
$("h1").css("color",'rgb('+g+','+b+','+r+')');
});

</script>
</head>

<!-- Styles -->
<style>
</style>
<body>
<h1>
RANDOM COLOR</h1>
</body>
</html>

Projavatricks

Thursday, 26 November 2015

How To Automatically Change Background Colour Of Website Using JQuery

How To Automatically Generate New Background Color:

How To Automatically Changed Fixed Background Colour:

No comments:

Post a Comment