This is just a small tip for fun. Sometime, we are bored with the only-one style in our website, but today, we will make some changes. We will create a javascript to randomize the CSS every time we refresh the web page. For what? Just make our style always get new.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
Try to refresh the demo page to see the effect.
We will use javascript function Math.random() to generate a random number between 0 and number of elements of an array which is an arrangement of stylesheet items.
Create a new javascript file which contains this function:
function rand(){ Â Â Â Â return Math.round(Math.random()*(css.length-1)); }
This gets us numbers from 0 to < (css.length-1) (Because the elements start from 0) which is this array below:
var css = new Array( Â Â Â Â '<link rel="stylesheet" type="text/css" href="default.css">', Â Â Â Â '<link rel="stylesheet" type="text/css" href="style2.css">', Â Â Â Â '<link rel="stylesheet" type="text/css" href="style3.css">', Â Â Â Â '<link rel="stylesheet" type="text/css" href="style4.css">' );
Then write it in HTML
rand = rand(); document.write(css[rand]);
That’s it! Enjoy the random CSS by refresh your webpage. Your random effect will show clearly if you have many elements in array. The more elements, the less repeat.
Nice . A suggestion. should added a text or something that says refresh the page to see the effect. Might be better for some user
Yes, that’s good for some users. Thanks for the suggestion Kawsar!
Nice, clean and easy!..
I make something like that in my website!..
http://pinguinox.com.ar ( work in progress website!.. )
Saludos!..
Great tips.
Tnx.
Awesome tips. Thanks for sharing this nice post.
thanks for tips