• Network
  • Security
  • Software
  • Thủ thuật
  • Tin tức
  • Video hướng dẫn
  • Donate – Mời AnonyViet ly Cafe ☕
AnonyViet
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
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
in Code
Reading Time: 7 mins read
A A
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. Thiết lập ngày kỷ niệm
    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.

Tham gia kênh Telegram của AnonyViet  👉 Link 👈

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.

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 16

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 17

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

5 bài tập Code giúp bạn tăng kinh nghiệm lập trình Web 28

5 bài tập Code giúp bạn tăng kinh nghiệm lập trình Web

15/08/2022
top 3 website hoc lap trinh web tot nhat

Top 4 Website học lập trình Web miễn phí tốt nhất trong năm 2022

29/03/2022
Top 7 trang web tốt nhất để học lập trình Web 29

Top 7 trang web tốt nhất để học lập trình Web

24/09/2021
17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút 30

17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút

10/07/2021

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 18

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.

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 19

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 20

  • 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 21

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 22Thiế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 23

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ả.

Hướng dẫn tự làm website đếm ngày yêu nhau cực dễ thương 24Đồ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 25

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 26

  • 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 27

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.

Bài viết đạt: 5/5 - (100 bình chọn)
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
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

Cách tạo trình quét Virus đơn giản bằng API của Virus Total 31
Code

Cách tạo trình quét Virus đơn giản bằng API của Virus Total

25/05/2023
Cách xem code dưới dạng Assembly 32
Code

Cách xem code dưới dạng Assembly

13/05/2023
Hướng dẫn tự tạo Bot ChatGPT trên Messenger 33
Code

Hướng dẫn tự tạo Bot ChatGPT trên Messenger

04/04/2023
Hướng dẫn tự tạo Bot ChatGPT trên Telegram 34
Python

Hướng dẫn tự tạo Bot ChatGPT trên Telegram

27/03/2023
Cách tạo Web App Chatbot viết code tự động bằng Python 35
Code

Cách tạo Web App Chatbot viết code tự động bằng Python

20/03/2023
Cách vượt Captcha Google bằng python 36
Python

Cách vượt Captcha Google bằng python

23/02/2023
Next Post
Xóa ngay CCleaner 5.45 đang thu thập dữ liệu người dùng trái phép 37

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
Inline Feedbacks
View all comments
ken
ken
4 years ago

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

Reply
Lmint
Author
Lmint
4 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é ^^

Reply
Anonymous
Anonymous
4 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

Reply
Trung anh
Trung anh
4 years ago
Reply to  Anonymous

Thêm autoplay vào nhé

Reply
long
long
4 years ago

cuar e bi loi Onan :Onan :Onan

Reply
ahihi
ahihi
4 years ago
Reply to  long

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

Reply
Duy
Duy
4 years ago
Reply to  ahihi

Mình cũng z

Reply
Trần Văn Việt
Trần Văn Việt
4 years ago

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

Reply
Tran Tuan Truong
Tran Tuan Truong
4 years ago

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

Reply
Johnathan Huu Tri
Johnathan Huu Tri
4 years ago

Thanks too much

Reply
vit
vit
4 years ago

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

Reply
AnonyViet
Admin
AnonyViet
4 years ago
Reply to  vit

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

Reply
Vịt
Vịt
4 years ago

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

Reply
Bình
Bình
4 years ago

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

Reply
AnonyViet
Admin
AnonyViet
4 years ago
Reply to  Bình

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

Reply
Phạm Đức Khoa
Phạm Đức Khoa
4 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

Reply
Phan Trần Công Minh
Phan Trần Công Minh
3 years 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

Reply
Quang
Quang
3 years 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 ạ

Reply
wpdiscuz   wpDiscuz

Asia 300×600

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác —

Shopee

Các bài mới

Thay pin iPhone 11 Pro Max có mất chống nước không 38

Thay pin iPhone 11 Pro Max có mất chống nước không

28/05/2023
Cách viết luận văn bằng ChatGPT không bị phát hiện 39

Cách viết luận văn bằng ChatGPT không bị phát hiện

28/05/2023
iPhone 13 bị đơ màn hình do đâu, khắc phục thế nào 40

iPhone 13 bị đơ màn hình do đâu, khắc phục thế nào

27/05/2023
3 cách lưu lịch sử trò chuyện với ChatGPT 41

3 cách lưu lịch sử trò chuyện với ChatGPT

27/05/2023
Sự nguy hiểm của thư mục .git 42

Sự nguy hiểm của thư mục .git

26/05/2023

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 hệ

Email: anonyviet.com[@]gmail.com

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

 

Bản quyền: DMCA.com Protection Status

Phản hồi gần đây

  • faxy as trong Key VMWare 17 Full Serial
  • siesta trong Cách đăng ký 6 tháng miễn phí Youtube Premium
  • Hevin trong Demo tấn công Phishing với Evilginx2 và cách phòng tránh
  • hoàng trong Cách xem code dưới dạng Assembly
  • hoàng trong Share Key Active Visual Studio Enterprise 2022

©2023 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ ku11net.co F8BET https://okuytin.com 6623 BK8 Goat 789b.win ST666 khoaitv Iwin f8bet hi 88 VN138 nhà cái mig8 i9bet w388 nhà cái jun88 jun88 https://7789bet.io/ https://j88casino.com/ 11bet keo nha cai vn88

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

©2023 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ ku11net.co F8BET https://okuytin.com 6623 BK8 Goat 789b.win ST666 khoaitv Iwin f8bet hi 88 VN138 nhà cái mig8 i9bet w388 nhà cái jun88 jun88 https://7789bet.io/ https://j88casino.com/ 11bet keo nha cai vn88

wpDiscuz
!

Ads

Ads Blocker Detected!!! - Vui lòng tắt Ad Blocker!!!

Vui lòng tắt Ad Blocker

Có vẻ như bạn đang bật trình chặn Quảng cáo.

{Trường hợp bạn đang dùng trình duyệt từ Facebook, hãy copy link bài viết qua Chrome để xem nội dung, như vậy sẽ không bị chặn}

Website chúng tôi duy trì nhờ vào doanh thu quảng cáo, vì vậy hãy tắt trình chặn quảng cáo để chúng tôi có kinh phí chi trả tiền thuê Server, xin cảm ơn!

Tải lại trang - Refresh Page