Random Sticker

Summary

The script randomly puts any one of a selection of code onto the page based on a random number generator.

I made this to put a random “Live Construction sticker” that lays on top of the page above the content. I planned on putting just one sticker, but there were many different ideas that I wanted to try out, so I wrote a script to randomly put any one of the three stickers I made.

Example

You should see one of three stickers on this page. Reload your page to see if the other stickers show up.

Date Created

7 Feb 2008.

Help

  1. w3schools.com as usual.
  2. I also got help from picasion.com to create an animated gif for one of the stickers that had a blinking text cursor.

Process

  1. Use JS to write on page.
  2. Generate a random number.
  3. Modify that number to yield only 1, 2, or 3.
  4. Write the stickers in HTML.
  5. Transfer the stickers to JS.
  6. Make conditional statements to get the stickers to appear randomly.
  7. Export the script.

The Code

Here’s the code. Please link back here if you’re using it.

Put this JavaScript in the head tag.


//
//Generate a random number
var num=Math.random();
document.write("Generate a random number: <u>"+num+"</u>");

//

//Take that random number, multiply by 4, and round down, then add 1 (yields 1, 2, or 3)
var num3=(Math.floor(num*3))+1;
document.write("<hr />Take that random number, multiply by 3, and round down, then add 1 (yields 1, 2, or 3): <u>"+num3+"</u>");

//

//Write the HTML code for the position:fixed stickers.

//

//Transfer HTML code to JavaScript area
//Make conditional statements and assign each randomly generated number to a sticker
if(num3==1){
document.write('<div id='liveConstBucket' style='width:117px;height:117px;padding:10px 10px 0 0;position:fixed;right:0;top:0;z-index:201;' >');
document.write('<img src='liveConstBucket.png' alt='Live Construction Bucket Sticker' ></img>');
document.write('</div>');
}

if(num3==2){
document.write('<div id='liveConstScale' style='width:100%;height:71px;margin:0 0 0 0;background-color:#fff;border-top:3px ridge #999;position:fixed;left:0;bottom:0;z-index:202;' >');
document.write('<img src='liveConstCodeAnimated.gif' alt='Live Construction Code Sticker' ></img>');
document.write('</div>');
document.body.style.paddingBottom="74px";
}

if(num3==3){
document.write('<div id='liveConstScale' style='width:307px;height:42px;padding:0 10px 10px 0;position:fixed;right:0;bottom:0;z-index:203;' >');
document.write('<img src='liveConstScale.png' alt='Live Construction Scale Sticker' ></img>');
document.write('</div>');
}
            

Return to top