• Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
AnonyViet
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
AnonyViet
No Result
View All Result

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

AnonyViet by AnonyViet
05/01/2017 - Updated on 12/07/2019
in Code
Reading Time: 3 mins read
A A
12

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

  1. DEMO:
  2. CODE:

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.

Các bài viết liên quan

Share khóa học lập trình Javascript từ cơ bản đến nâng cao

Share khóa học lập trình Javascript từ cơ bản đến nâng cao

25/01/2018 - Updated on 25/06/2018

DEMO:

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

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/resource/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/resource/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;
}

//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);

 

Xem thêm:  Code trang chủ Hacker cực đẹp
Tags: javascript hoa mai rơijavascript hoa rơijavascript hoa đào rơi
Previous Post

Hướng dẫn tạo BOT Chat Facebook Messenger trên FanPage

Next Post

5 Cách giúp tự tạo Bot Facebook Messenger không cần lập trình

AnonyViet

AnonyViet

Kiến thức như một ngọn lửa, càng chia sẽ nó sẽ càng bùng cháy!

Related Posts

[Godot RPG]#5: Autotile - Lập trình game Godot Engine 5
Godot

[Godot RPG]#5: Autotile – Lập trình game Godot Engine

05/04/2021
tạo extension nhắc việc chrome đơn giản
Code

Hướng dẫn tự tạo Extension Chrome bằng Scratch

27/03/2021
[Godot RPG] #4 : Tilemap 6
Godot

[Godot RPG] #4 : Tilemap

04/03/2021 - Updated on 05/03/2021
hoc code powershell
Code

Hướng dẫn lập trình PowerShell trên Windows

27/02/2021
code shell script
Code

Cách viết Shell Script trong Linux/Unix

17/02/2021
code python keylogger
Code

Cách tạo KeyLogger bằng Python đơn giản nhất

14/02/2021
Next Post
5 Cách giúp tự tạo Bot Facebook Messenger không cần lập trình 1

5 Cách giúp tự tạo Bot Facebook Messenger không cần lập trình

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

12 Comments
oldest
newest
Inline Feedbacks
View all comments
Lâm Trung Tính
Lâm Trung Tính
3 years ago

Ad chụp ảnh cụ thể hoa may đi cho dễ hình dung :))

Reply
Blacknet
Blacknet
3 years ago
Reply to  Lâm Trung Tính

Có hình demo đấy bạn

Reply
Nguyễn Lam
Nguyễn Lam
3 years ago
Reply to  Lâm Trung Tính

Hình demo ở trên bạn ơi

Reply
Lâm Trung Tính
Lâm Trung Tính
3 years ago

Thanks Ad rất nhiều đã chia sẻ code này..trên mạng thấy nó không được chi tiết

Reply
Nguyễn Lam
Nguyễn Lam
3 years ago
Reply to  Lâm Trung Tính

Trên mạng sao bằng của anonyviet hehe

Reply
Blacknet
Blacknet
3 years ago

Thank ad hay lắm

Reply
Blacknet
Blacknet
3 years ago

Nếu có thêm video hướng dẫn nữa thì dễ làm hơn

Reply
Nguyễn Lam
Nguyễn Lam
3 years ago
Reply to  Blacknet

theo mình nghĩ thì trên youtube cũng có video mà không chi tiết bằng của anonyviet

Reply
Nguyễn Lam
Nguyễn Lam
3 years ago

Hay lắm ad :v nếu có like ở đây thì 100k like cho ad

Reply
Nguyễn Lam
Nguyễn Lam
3 years ago

Mà ad có hoa trang trí khác k v

Reply
Cường
Cường
3 years ago

cảm ơn ad ạ

Reply
long
long
3 years ago

Ad ơi , em là ng mới bắt đầu tìm hiểu , bây h em chưa hiểu là phải làm ntn cả

Reply
wpdiscuz   wpDiscuz

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

VPN để chơi game

Có nên sử dụng VPN để chơi game không?

10/04/2021
lỗi "Windows needs more space" khi Update Windows

Cách sửa lỗi “Windows needs more space” khi cập nhật Windows 10

10/04/2021
ban da khoa trang ca nhan

Cách tạo Trang cá nhân bị khóa – Locked Profile trên Facebook

08/04/2021
nang cap ios 14.3 khong can shsh

Hướng dẫn nâng cấp iOS 14.3 không cần SHSH

08/04/2021
download Ninjutsu OS

Ninjutsu OS – Hệ điều hành dành cho Hacker dựa trên Windows 10

08/04/2021

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên kết

Game B52
Tải game đổi thưởng online
Chơi game bài hot 2020
Chơi game bài đổi thưởng online
RikVip
iwin888
Gam Víp
88vin link

Liên hệ đặt Ads: [email protected]

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

Bài viết mới

  • Có nên sử dụng VPN để chơi game không?
  • Cách sửa lỗi “Windows needs more space” khi cập nhật Windows 10
  • Cách tạo Trang cá nhân bị khóa – Locked Profile trên Facebook
  • Hướng dẫn nâng cấp iOS 14.3 không cần SHSH
  • Ninjutsu OS – Hệ điều hành dành cho Hacker dựa trên Windows 10
  • Hướng dẫn xem phim tại Galaxy Play miễn phí 1 năm
  • Giới thiệu về AnonyViet
  • Liên hệ Quảng cáo
  • Privacy & Policy
  • Contact

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

wpDiscuz