• 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
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:  Học Lập Trình Game Cần Gì? Có Khó Không? Học Bao Lâu?
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

môi trường ảo python windows
Code

Cách thiết lập môi trường ảo Python trên Windows 10

17/01/2021
Các kiểu dữ liệu cơ bản trong Python 5
Code

Các kiểu dữ liệu cơ bản trong Python

12/01/2021
Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học
Code

Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học

27/11/2020 - Updated on 30/11/2020
Xoá các File trùng lặp bằng Python
Code

Viết chương trình Xoá các File trùng lặp bằng Python

22/10/2020
viet ung dung chat bang python
Code

Cách viết ứng dụng chat đơn giản bằng Python

15/10/2020 - Updated on 16/10/2020
ứng dụng tra số điện thoại thuộc Quốc gia nào
Code

Viết ứng dụng tra số điện thoại thuộc Quốc gia nào bằng Python

11/10/2020 - Updated on 13/10/2020
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 most voted
Inline Feedbacks
View all comments
Lâm Trung Tính | <span class="wpdiscuz-comment-count">948 comments</span>
Lâm Trung Tính | 948 comments
3 years ago

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

0
Reply
Blacknet | <span class="wpdiscuz-comment-count">286 comments</span>
Blacknet | 286 comments
3 years ago
Reply to  Lâm Trung Tính

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

0
Reply
Nguyễn Lam | <span class="wpdiscuz-comment-count">1030 comments</span>
Nguyễn Lam | 1030 comments
3 years ago
Reply to  Lâm Trung Tính

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

0
Reply
Lâm Trung Tính | <span class="wpdiscuz-comment-count">948 comments</span>
Lâm Trung Tính | 948 comments
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

0
Reply
Nguyễn Lam | <span class="wpdiscuz-comment-count">1030 comments</span>
Nguyễn Lam | 1030 comments
3 years ago
Reply to  Lâm Trung Tính

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

0
Reply
Blacknet | <span class="wpdiscuz-comment-count">286 comments</span>
Blacknet | 286 comments
3 years ago

Thank ad hay lắm

0
Reply
Blacknet | <span class="wpdiscuz-comment-count">286 comments</span>
Blacknet | 286 comments
3 years ago

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

0
Reply
Nguyễn Lam | <span class="wpdiscuz-comment-count">1030 comments</span>
Nguyễn Lam | 1030 comments
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

0
Reply
Nguyễn Lam | <span class="wpdiscuz-comment-count">1030 comments</span>
Nguyễn Lam | 1030 comments
3 years ago

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

0
Reply
Nguyễn Lam | <span class="wpdiscuz-comment-count">1030 comments</span>
Nguyễn Lam | 1030 comments
3 years ago

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

0
Reply
Cường | <span class="wpdiscuz-comment-count">6 comments</span>
Cường | 6 comments
3 years ago

cảm ơn ad ạ

0
Reply
long | <span class="wpdiscuz-comment-count">3 comments</span>
long | 3 comments
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ả

0
Reply

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

Ping of Death ddos

Ping of Death là gì? Thực hiện Ping of Death để DDOS như thế nào?

24/01/2021
Download Burp Suite 2020.12 Pro Full Key - Cách Active bản quyền 6

Download Burp Suite 2020.12 Pro Full Key – Cách Active bản quyền

24/01/2021
Cách chọn thức ăn theo Nhóm Máu để cường tăng sức khỏe

Cách chọn Thức Ăn theo Nhóm Máu để cường tăng sức khỏe

23/01/2021
Cách cài đặt Docker trên Ubuntu 20.04 LTS 7

Cách cài đặt Docker trên Ubuntu 20.04 LTS

23/01/2021
logo seed4me

Nhận bản quyền License 6 tháng VPN của Seed4Me

23/01/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 | 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

  • Ping of Death là gì? Thực hiện Ping of Death để DDOS như thế nào?
  • Download Burp Suite 2020.12 Pro Full Key – Cách Active bản quyền
  • Cách chọn Thức Ăn theo Nhóm Máu để cường tăng sức khỏe
  • Cách cài đặt Docker trên Ubuntu 20.04 LTS
  • Nhận bản quyền License 6 tháng VPN của Seed4Me
  • 11 Tiện ích Chrome tăng năng suất học tập cho Học Sinh Sinh Viên
  • 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