• 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

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương

Lmint by Lmint
07/08/2018 - Updated on 01/09/2019
in Code
18

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

  1. Chi tiết về ứng dụng đếm ngày yêu
  2. Hướng dẫn thiết lập trang web và sử dụng
    1. Hướng dẫn chỉnh sửa giao diện
    2. Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 8
    3. Chỉnh sửa danh sách bài hát

Trên điện thoại có ứng dụng đếm ngày quen nhau dành cho các cặp đôi. Nếu bạn không muốn giống người khác, bạn muốn tự làm một ứng dụng đặc biệt hơn. Hay nói cách khác, bạn muốn tạo bất ngờ cho người yêu bằng cách tự làm ứng dụng đếm ngày quen nhau.

Làm vậy sẽ có ý nghĩa hơn và cho cô ấy cảm thấy được sự chân thành của bạn. Hôm nay, mình chia sẽ cho bạn giao diện trang web đếm ngày yêu do mình tự viết. Trang web này khá lãng mạng với màu sắc hài hòa và dịu dàng được đổ từ hồng sang tím.

Chi tiết về ứng dụng đếm ngày yêu

Đếm ngày yêu nhau

Được lập trình bởi Lmint.

Xem bản live trang web tại:

https://anonyviet.com/resource/demngayyeu/

Bức ảnh phía trên là giao diện của trang web đếm ngày yêu mà chúng ta sẽ làm. Bây giờ mình xin giới thiệu sơ qua giao diện và các chức năng của trang. Cách chỉnh sửa và hướng dẫn sử dụng mình sẽ viết ngay sau phần giới thiệu này.

Đầu tiên, đồng hồ thời gian sẽ đếm thời gian bắt đầu từ ngày hai bạn quen nhau đến thời điểm hiện tại. Ví dụ trên ảnh, mình đã tự yêu bản thân mình trong thời gian là 6 ngày 10 tiếng 39 phút 06 giây. (Kể từ ngày 01/08/2018 đến 7/08/2018).

Còn ngày kỷ niệm quen nhau sẽ được hiển thị dưới biểu tượng trái tim (giữa hai tấm ảnh). Còn có một chức năng là phát một bài hát bất kỳ trong danh sách bài hát được chuẩn bị trước.

Xem thêm:  Share source code (mã nguồn) tool chat Simsimi AutoIT

Trang web được thiết kế có khả năng tương thích đa thiết bị. Nghĩa là nó sẽ tự co giãn phù hợp với màn hình các thiết bị điện thoại và máy tính bảng. Ảnh dưới đây là giao diện trang web khi hiển thị trên màn hình Iphone 6s/7s.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 14

Mọi thứ vẫn ổn khi hiển thị trên điện thoại.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 15

Quá đã phải không !! Đây là món quà dành tinh thần dành tặng cho người yêu thể sự chân thành và trân trọng nửa kia. Bây giờ, mình sẽ hướng dẫn bạn cách chỉnh sửa và sử dụng trang web đếm ngày yêu này nhé !!!

Hướng dẫn thiết lập trang web và sử dụng

Bạn cần tải bộ code web đã được mình chuẩn bị sẵn tại liên kết dưới đây.

Tải code web
Tải code web (Backup)

 

Mật khẩu giải nén: anonyviet.com

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

Share Code Shop Bán Acc Game Cực Nhẹ Viết Bằng Bootstrap 26

Share Code Shop Bán Acc Game Cực Nhẹ Viết Bằng Bootstrap

02/09/2020
share code phpsound

phpSOUND 6.2 – Code Xây dựng mạng xã hội chia sẻ âm nhạc

03/08/2020
có nên sử dụng wordpress

Có nên sử dụng WordPress để thiết kế Website không?

24/07/2020
source code nghe nhạc online

Download Code Nghe nhạc Online bằng HTML, CSS, JS

10/02/2020 - Updated on 24/02/2020

Sau khi tải về và giải nén, hãy đảm bảo bạn có đủ các thành phần như ảnh dưới đây.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 16

Tiếp theo bạn cần một phần mềm hỗ trợ viết code web để chỉnh sửa giao diện. Có thể sử dụng Sublime Text 3, Notepad++ hoặc Visual Studio Code đều được. Miễn sao có thể chỉnh sửa được code là được.

Xem thêm:  [Lập Trình Game] Bài 4: Tạo Camera theo dõi nhân vật

Hướng dẫn chỉnh sửa giao diện

Bắt đầu từ File index.html, hãy mở nó lên bằng phần mềm chỉnh sửa.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 17

Các phần chữ màu trắng trong hình là các nội dung được hiển thị trên trang web. Hãy sửa đổi lại thành nội dung của bạn. Tuy nhiên, phần nội dung nào không thấy xuất hiện trên trang web thì đừng sửa để tránh gặp lỗi.

  • Tải 02 tấm ảnh đại diện mà bạn muốn sử dụng rồi bỏ vào thư mục img. 

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 18

  • Quay trở lại giao diện code, thay đổi tên ảnh trong đường dẫn thành tên file ảnh mà bạn muốn đổi. Ví dụ trong ảnh bên dưới, mình sử dùng ảnh main.jpg làm ảnh đại diện.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 19

Kết quả, ảnh main.jpg được sử dụng để làm ảnh đại diện. Do mình đều viết tên hai ảnh là main.jpg (ảnh trên) nên hai ảnh đại diện sẽ cùng sử dụng chung 1 tấm ảnh.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 20Thiết lập ngày kỷ niệm

Mở file app.js bằng phần mềm chỉnh sửa. Ở dòng đầu tiên của file app.js, bạn sẽ nhìn thấy như ảnh dưới đây.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 21

Chúng ta sẽ thiết lập ngày kỉ niệm trong dòng này. Bạn cần thay đổi dòng chữ màu xanh lá trong ảnh trên thành ngày tháng kỉ niệm của bạn. Ví dụ, mình muốn ngày kỉ niệm là ngày 30 tháng 10 năm 2016 2 giờ 10 phút 26 giây.

Mình sẽ chỉnh dòng chữ màu xanh lá lại như sau:

2016-10-30T02:10:26

  • Phía trước chữ T là ngày tháng
  • Phía sau chữ T là thời gian.

Chỉnh sửa xong thì Save lại là được, ảnh dưới đây là kết quả.

Xem thêm:  Share code web tỏ tình hẹn hò bạn gái đi coi phim cực lãng mạn

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 22Đồng hồ sẽ tự cập nhật được thời gian và đã đếm chính xác ngày tháng cho bạn. Phần cuối cùng, chúng ta sẽ chỉnh sửa danh sách các bài hát.

Chỉnh sửa danh sách bài hát

Hãy tải các bài hát định dạng .mp3 và bỏ vào thư mục music. Mình có 3 bài hát để sẵn trong thư mục music cho bạn rồi.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 23

Mở lại file app.js để chỉnh sửa danh sách nhạc. Tại dòng thứ 2 trong file app.js, bạn sẽ liệt kê tên của các file nhạc vào mảng dữ liệu của chương trình.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 24

  • Nội dung được viết giữa hai dấu ngoặc []
  • Mỗi tên bài hát (mỗi phần tử) được bao trong dấu ngoặc kép “” hoặc ”
  • Các phần tử cách nhau bởi dấu phẩy.

Mình đã liệt kê xong 3 file nhạc của mình. Khi người khác truy cập vào web và ấn nút phát nhạc, chương trình sẽ tự động phát ngẫu nhiên 1 bài trong số bài hát được liệt kê.

Vậy là xong, việc cuối cùng của bạn là upload mã nguồn lên host để người khác có thể truy cập vào. Nếu bạn chưa biết upload lên host thì hãy xem hướng dẫn tại đây.

Lưu ý, khi upload lên host vẫn phải giữ đúng vị trí các file nhá. Mình đã upload lên host của mình và vẫn giữ đúng thứ tự và vị trí các file.

Mình đã upload lên host và giữ đúng thứ tự các file.
Bạn không cần quan tâm file default.php (nó chỉ là file rác của mình thôi).

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 25

Cảm ơn các bạn đã ủng hộ mình, liên hệ mình qua Facebook: facebook.com/minhthong.lu.58.

Chúc bạn thành công
Lmint.

Tags: code web tỏ tìnhlàm web tỏ tìnhlập trình webphần mềm đếm ngày yêu nhauquen nhaushare code websource codetự làm webứng dụng đếm ngày quen nhauwebsite đếm ngày yêuyêu nhau
Previous Post

Hướng dẫn tạo ảnh từ lời bài hát với LyricsPoster

Next Post

Xóa ngay CCleaner 5.45 đang thu thập dữ liệu người dùng trái phép

Lmint

Lmint

Người mà bạn nên trông đợi, chỉ có bản thân bạn mà thôi. Đừng phụ thuộc quá nhiều vào người khác để đến khi nhìn lại bản thân thì chẳng làm được gì nên trò.

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 27
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
Xóa ngay CCleaner 5.45 đang thu thập dữ liệu người dùng trái phép 28

Xóa ngay CCleaner 5.45 đang thu thập dữ liệu người dùng trái phép

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.

18 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
ken | <span class="wpdiscuz-comment-count">2 comments</span>
ken | 2 comments
2 years ago

Sublime Text 3, Notepad++ hoặc Visual Studio Code là tải trên google về ad

0
Reply
Lmint | <span class="wpdiscuz-comment-count">136 comments</span>
Author
Lmint | 136 comments
2 years ago
Reply to  ken

Nó là chương trình giúp em soạn thảo code đó em !!
Em nên học Html trước khi sài code web nhé ^^

0
Reply
Anonymous | <span class="wpdiscuz-comment-count">6 comments</span>
Anonymous | 6 comments
2 years ago
Reply to  Lmint

ad ơi làm sao để nhạc tự phát khi người khác vào mà không cần ấn phát

0
Reply
Trung anh | <span class="wpdiscuz-comment-count">1 comments</span>
Trung anh | 1 comments
2 years ago
Reply to  Anonymous

Thêm autoplay vào nhé

0
Reply
long | <span class="wpdiscuz-comment-count">1 comments</span>
long | 1 comments
2 years ago

cuar e bi loi Onan :Onan :Onan

0
Reply
ahihi | <span class="wpdiscuz-comment-count">4 comments</span>
ahihi | 4 comments
2 years ago
Reply to  long

của mình cx bị vậy

0
Reply
Duy | <span class="wpdiscuz-comment-count">23 comments</span>
Duy | 23 comments
2 years ago
Reply to  ahihi

Mình cũng z

0
Reply
Trần Văn Việt | <span class="wpdiscuz-comment-count">1 comments</span>
Trần Văn Việt | 1 comments
2 years ago

hữu ích . thank lưu minh thông

0
Reply
Tran Tuan Truong | <span class="wpdiscuz-comment-count">3 comments</span>
Tran Tuan Truong | 3 comments
2 years ago

ad dùng host gì vậy ạ :v

0
Reply
Johnathan Huu Tri | <span class="wpdiscuz-comment-count">14 comments</span>
Johnathan Huu Tri | 14 comments
2 years ago

Thanks too much

0
Reply
vit | <span class="wpdiscuz-comment-count">2 comments</span>
vit | 2 comments
2 years ago

tải về thiếu mất file app.js anh ơi

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1526 comments</span>
Admin
AnonyViet | 1526 comments
2 years ago
Reply to  vit

bạn giải nén ra lại xem, mình tải về thấy đầy đủ mà

0
Reply
Vịt | <span class="wpdiscuz-comment-count">2 comments</span>
Vịt | 2 comments
2 years ago

anh ơi – em bị lỗi ngày – nó cứ 0NaN:0NaN:0NaN thì fix như nào ạ

0
Reply
Bình | <span class="wpdiscuz-comment-count">5 comments</span>
Bình | 5 comments
2 years ago

anh ơi giải nén ra nó bị lỗi mất file hết a ơi

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1526 comments</span>
Admin
AnonyViet | 1526 comments
2 years ago
Reply to  Bình

bạn tải winrar mới nhất để giải nén nha

0
Reply
Phạm Đức Khoa | <span class="wpdiscuz-comment-count">1 comments</span>
Phạm Đức Khoa | 1 comments
2 years ago

Cho em xin link download code không có pass với
Em dùng điện thoại nên không mở file có pass dc

0
Reply
Phan Trần Công Minh | <span class="wpdiscuz-comment-count">1 comments</span>
Phan Trần Công Minh | 1 comments
1 year ago

Minh Sẽ Giải Đáp Thắc Mắc Cho Các Bạn Phần 0NaN:0NaN:0NaN Nha : facebook.com/Minh.Venh

0
Reply
Quang | <span class="wpdiscuz-comment-count">1 comments</span>
Quang | 1 comments
1 year ago
Reply to  Phan Trần Công Minh

mình bị lỗi Define . as your location, if you want to extract compressed file in current folder thì làm sao ạ

0
Reply

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

lenh pha huy o cung windows 10

Đây là lệnh trên Windows 10 khiến ổ cứng bị hỏng

18/01/2021
dinh vi dia chi nha bang ip seeker

Cách dùng Seeker để xác định địa chỉ người khác bằng GPS

18/01/2021
ghép ảnh áo dài tết

Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop

17/01/2021 - Updated on 18/01/2021
Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS 29

Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS

17/01/2021
môi trường ảo python windows

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

17/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

  • Đây là lệnh trên Windows 10 khiến ổ cứng bị hỏng
  • Cách dùng Seeker để xác định địa chỉ người khác bằng GPS
  • Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop
  • Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS
  • Cách thiết lập môi trường ảo Python trên Windows 10
  • Cách dùng Absorber Keylogger bí mật ghi lại thao tác bàn phí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