Apply random CSS and change random image using Mootools
Tagged:

MooTools is an open source, lightweight, modular object-oriented programming JavaScript web application framework. The MooTools JavaScript framework includes built-in functions for manipulation of CSS, DOM elements, native JavaScript objects, Ajax requests, and more.

This is a simple example where I have used MooTools framework to create a page that loads a random CSS file after a certain duration. I have applied random CSS to the page after every 3 seconds here. However, note that since I have a selected a number randomly, in some cases a same random number may be selected twice hence, delaying the time to apply a different CSS file.

Live Demonstration:
Click here to view the demo

You can get the latest version of MooTools here.

Usage:




Applying CSS to the page...
The CSS files changes in an interval of 3 seconds.
Note: The random CSS file is being loaded here.
Hence, if same random number is selected twice, it may take some more time to apply CSS to the page.





Brief Code Explanation:

Here, a function call is initiated for an event initially when the page loads. This function calls yet another function getCSS at an interval of 3 seconds. The getCSS function simply generates a random variable each time it is called. Then, a new value of css and image name is created by appending the random variable generated. Finally, it sets the attribute of the respective elements like 'href' and 'src' in the page to a changed value.