Javascript Hoa mai đào rơi trang trí Tết cho Website

05/01/2017

Lại một các tết gần đến, ai cũng lo trang trí cho Website của mình để chào đón năm mới, ngoài Code bắn pháo hoa, và hoa rơi theo chuột, hôm nay mình sẽ hướng dẫn các bạn tạo tạo Hoa mai, đào rơi cho Website nhé.

Chỉ với 1 thao tác đơn giản là bạn có thể thưởng thức khung cảnh hoa rơi trên website của bạn.

Mục lục bài viết:

1 DEMO:
2 CODE:

DEMO:

CODE:

Dán đoạn javascript dưới đây vào phía sau thẻ <head> và lưu lại , sau đó refresh lại Website và chờ 1 chút là thấy hoa mai và hoa đào băt đầu rơi.

<script type="text/javascript" src="https://anonyviet.com/php/hoaroi/hoaroi.js"></script>

1	<script type="text/javascript" src="https://anonyviet.com/php/hoaroi/hoaroi.js"></script>

Hoặc sử dụng đoạn Javascript rồi tùy biến theo ý bạn:

var pictureSrc ="https://anonyviet.com/php/hoaroi/hoadao.png"; //the location of the snowflakes
var pictureWidth = 20; //the width of the snowflakes
var pictureHeight = 20; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side


if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://anonyviet.com/share-khoa-hoc-javascript/" target="_blank" class="u879213f09a8af53f99d1a56ef5fffaa7"><style>.u879213f09a8af53f99d1a56ef5fffaa7{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:#eaeaea;border:0!important;border-left:4px solid #F39C12!important;box-shadow:0 1px 2px rgba(0,0,0,.17);-moz-box-shadow:0 1px 2px rgba(0,0,0,.17);-o-box-shadow:0 1px 2px rgba(0,0,0,.17);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.17);text-decoration:none}.u879213f09a8af53f99d1a56ef5fffaa7:active,.u879213f09a8af53f99d1a56ef5fffaa7:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.u879213f09a8af53f99d1a56ef5fffaa7{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms}.u879213f09a8af53f99d1a56ef5fffaa7 .ctaText{font-weight:700;color:#16A085;text-decoration:none;font-size:16px}.u879213f09a8af53f99d1a56ef5fffaa7 .postTitle{color:#3498DB;text-decoration:underline!important;font-size:16px}.u879213f09a8af53f99d1a56ef5fffaa7:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Xem thêm:</span>  <span class="postTitle">Share khóa học lập trình Javascript từ cơ bản đến nâng cao</span></div></a></div>
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}

//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}

window.setInterval('flakeFall();',100);

var pictureSrc ="https://anonyviet.com/php/hoaroi/hoadao.png"; //the location of the snowflakes

var pictureWidth = 20; //the width of the snowflakes

var pictureHeight = 20; //the height of the snowflakes

var numFlakes = 10; //the number of snowflakes

var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)

var lrFlakes = 10; //the speed that the snowflakes should swing from side to side

if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes

for( var x = ; x < numFlakes; x++ ) {

if( document.layers ) { //releave NS4 bug

document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');

} else {

document.write('<div style="position:absolute;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');

}

//calculate initial positions (in portions of browser window size)

var xcoords = new Array(), ycoords = new Array(), snFlkTemp;

for( var x = ; x < numFlakes; x++ ) {

xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );

do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );

} while( typeof( ycoords[snFlkTemp] ) == 'number' );

ycoords[snFlkTemp] = x / numFlakes;

}

//now animate

function flakeFall() {

if( !getRefToDivNest('snFlkDiv0') ) { return; }

var scrWidth = , scrHeight = , scrollHeight = , scrollWidth = ;

//find screen settings for all variations. doing this every time allows for resizing and scrolling

if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {

if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {

scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {

if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }

if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {

if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {

if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }

}

//move the snowflakes to their new position

for( var x = ; x < numFlakes; x++ ) {

if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = ; }

var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }

if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : ;

divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;

divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;

ycoords[x] += downSpeed;

}

//DHTML handlers

function getRefToDivNest(divName) {