Tiger Bird Webdesign: Blinking Xmas Tree With JavaScript Math.random()

Blinking Xmas Tree With JavaScript Math.random()

Click on the top and let it blink

It's Xmas time! When I was walking in downtown seeing all this beautiful Xmas decorations I was inspired to make my own Xmas tree with JavaScript.

A tree usually has a crown and trunk. The crown of the Xmas tree is made of 3 div elements. 1 green div element has white div elements on the right and left side creating a triangle. The decoration balls are also div elements with a border-radius of 50% defined in CSS.

Now the Xmas tree is ready to blink. So let's look at the JavaScript code. We want that the balls change colours randomly in a certain interval. The Math object with the random () method generates random numbers between 0 and 1; the syntax is Math.random().

Next, we define the colours for each ball with document.getElementById("id of the element").style.backgroundColor=#some color. Now, with Math.random() we generate random numbers and if the number is smaller than 0.5 the balls have colour A and if it is bigger than 0.5 they have colour B.

The method setTimeout evaluates the function for each half second generating random numbers and creating the blinking effect.

Save the CSS file with XMas_tree.css and the JavaScript file with XMas_tree.js otherwise it will not work. Our you can change the file name of css and js in the HTML code.

HTML Code



<!Doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css"  href="XMas_tree.css"></style>
<script src="XMas_tree.js" type="text/javascript" language="Javascript"></script> 
</head>

<body onload="blink()">

<div id="xmas_tree">

<div id="top_crown">
 <div id="top_left_cover">
</div>
<div id="top_right_cover">
</div>
<div class="balls" id="top_ball_one">
</div>
<div class="balls" id="top_ball_two">
</div>
</div>
<div id="mid_crown">
 <div id="mid_left_cover">
</div>
<div id="mid_right_cover">
</div>
<div class="balls" id="mid_ball_one">
</div>
<div class="balls" id="mid_ball_two">
</div>
<div class="balls" id="mid_ball_three">
</div>
</div>
<div id="trunk">
</div>
</div>

CSS Code


#xmas_tree
{position:relative;
left:200px;
width:300px;
height:300px;
}


#top_crown
{position:absolute;
top:50px;
width:110px;
height:50px;
background-color:#336600;
}


#top_left_cover
{position:absolute;
left:-30px;
width:70px;
height:50px;
background-color:white;
-ms-transform:skew(135deg);
-moz-transform:skew(135deg);
-o-transform:skew(135deg);
-webkit-transform:skew(135deg);
transform:skew(135deg);
}

#top_right_cover
{position:absolute;
left:70px;
width:70px;
height:50px;
background-color:white;
-ms-transform:skew(45deg);
-moz-transform:skew(45deg);
-o-transform:skew(45deg);
-webkit-transform:skew(45deg);
transformt:skew(45deg);
}


/*top balls*/

#top_ball_one
{position:absolute;
left:25px;
top:15px;
height:20px;
width:20px;
background-color:orange;
-moz-border-radius:50p%;
-webkit-border-raidus:50%;
border-radius:50%;
}


#top_ball_two
{position:absolute;
left:65px;
top:15px;
height:20px;
width:20px;
background-color:orange;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}


/*middle crwon*/

#mid_crown
{position:absolute;
top:100px;
width:110px; 
height:50px;
background-color:#336600;
}
 
#mid_left_cover
{position:absolute;
left:-30px;
width:50px;
height:50px;
background-color:white;
-ms-transform:skew(145deg);
-moz-transform:skew(145deg);
-o-transform:skew(145deg);
-webkit-transform:skew(145deg);
transform:skew(145deg);
}

#mid_right_cover
{position:absolute;
left:90px;
width:50px;
height:50px;
background-color:white;
-ms-transform:skew(35deg);
-moz-transform:skew(35deg);
-o-transform:skew(35deg);
-webkit-transform:skew(35deg);
transformt:skew(35deg);
}




/*mid balls*/
#mid_ball_one
{position:absolute;
top:10px;
left:15px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}


#mid_ball_two
{position:absolute;
top:20px;
left:45px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

#mid_ball_three
{position:absolute;
top:10px;
left:75px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}



#trunk
{position:absolute;
left:43px;
top:150px;
width:20px;
height:30px;
background-color:#663300
;
}

JavaScript Code



function blink(){
var r = Math.random();

if (r<0.5){
document.getElementById("top_ball_one").style.backgroundColor = "red";
document.getElementById("top_ball_two").style.backgroundColor = "#CCCCFF";
document.getElementById("mid_ball_one").style.backgroundColor = "#00FF00";
document.getElementById("mid_ball_two").style.backgroundColor = "#FF33CC";
document.getElementById("mid_ball_three").style.backgroundColor =" #33CCFF";
}

if (r>0.5){
document.getElementById("top_ball_one").style.backgroundColor = "blue";
document.getElementById("top_ball_two").style.backgroundColor = "lime";
document.getElementById("mid_ball_one").style.backgroundColor = "#FFFF00";
document.getElementById("mid_ball_two").style.backgroundColor = "#FFFF66";
document.getElementById("mid_ball_three").style.backgroundColor = "#FF5050";
}

setTimeout(blink,500);
}

Tiger Bird Webdesign

Tuesday, 9 December 2014

Blinking Xmas Tree With JavaScript Math.random()

HTML Code

CSS Code

JavaScript Code

No comments:

Post a Comment