Hiển thị ngày giờ trong html

Question: Cho mình hỏi có cách nào để lấy ngày giờ hiện tại trong HTML không? Đây là câu hỏi mà mình đã nhận được từ nhiều bạn, nên hôm nay mạo muội viết một bài thủ thuật đơn giản.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thực tế thì HTML không phải là ngôn ngữ lập trình, nó chỉ là ngôn ngữ đánh dấu siêu văn bản nên chỉ thực thi được ở dạng tĩnh, không có cấu trúc lập trình nên không linh động được.

Tuy nhiên, nếu bạn muốn lấy thời gian hiện tại để hiển thị trong thẻ HTML thì hãy sử dụng cách dưới đây nhé.

Bạn hãy sử dung kết hợp với ngôn ngữ Javascript, tức là sẽ dùng JS để lấy thời gian hiện tại, sau đó gán giá trị vào thẻ HTML.

Bài viết này được đăng tại [free tuts .net]

Bước 1: Bạn hãy đặt cho thẻ HTML cần hiển thị ngày giờ hiện tại một cái tên bất kì. Giả sử mình đặt tên như sau:

Bước 2: Dùng JS để đổ giá trị thời gian hiện tại vào thẻ đó.

var curDate = new Date[]; // Ngày hiện tại var curDay = curDate.getDate[]; // Tháng hiện tại var curMonth = curDate.getMonth[] + 1; // Năm hiện tại var curYear = curDate.getFullYear[]; // Gán vào thẻ HTML document.getElementById['current-time'].innerHTML = curDay + "/" + curMonth + "/" + curYear;

Thật đơn giản phải không các bạn. Nếu bạn muốn hiển thị kiểu khác thì cứ sửa trong dòng cuối cùng nhé.

Lấy ngày giờ hiện tại bằng JavaScript. Date Object trong JavaScript rất hữu ích để kiểm tra ngày và thời gian khách truy cập đến trang web của bạn

JavaScript là ngôn ngữ lập trình được sử dụng cho World Wide Web. Date Object trong JavaScript rất hữu ích để kiểm tra ngày và thời gian khách truy cập đến trang web của bạn. Hướng dẫn này sẽ giúp bạn biết cách sử dụng JavaScript để lấy ngày giờ hiện tại – current Date Time từ máy khách.

Mục lục

  • Tạo Date Object trong JavaScript
  • Sử dụng Get Method để hiển thị Ngày giờ hiện tại trong JavaScript
  • Hiển thị giờ, phút và giây bằng JavaScript
  • Hiển thị đầy đủ ngày giờ hiện tại bằng JavaScript
  • Kết luận

Tạo Date Object trong JavaScript

Để tạo một Date Object với ngày và giờ hiện tại, hãy thêm biến today vào file js của bạn:

var today = new Date[];

Sử dụng Get Method để hiển thị Ngày giờ hiện tại trong JavaScript

Nếu bạn muốn lấy ngày ở định dạng DD-MM-YYY, bạn cần thêm biến sau:

var date = today.getDate[]+'-'+[today.getMonth[]+1]+'-'+today.getFullYear[];
  • today.getFullYear[] – Hiển thị năm với 4 chữ số.
  • today.getMonth[]+1 – Hiển thị tháng.
  • today.getDate[] – Hiển thị ngày.

Nếu bạn thích một định dạng khác, chỉ cần thay đổi thứ tự của các lệnh.

Hiển thị giờ, phút và giây bằng JavaScript

Để hiển thị thời gian ở định dạng HH:MM:SS, hãy chỉnh sửa file của bạn như sau:

 var today = new Date[];
 var time = today.getHours[] + ":" + today.getMinutes[] + ":" + today.getSeconds[];
 
 document.getElementById["hvn"].innerHTML = time;
  • today.getHours[] – Hiển thị giờ.
  • today.getMinutes[] – Hiển thị phút.
  • today.getSeconds[] – Hiển thị giây.

Hiển thị đầy đủ ngày giờ hiện tại bằng JavaScript

Kết hợp hai đoạn code để hiển thị đầy đủ ngày và giờ ở định dạng DD-MM-YYY và HH:MM:SS. Chỉnh sửa file của bạn như sau:

   var today = new Date[];
   var date = today.getDate[]+'-'+[today.getMonth[]+1]+'-'+today.getFullYear[];
   var time = today.getHours[] + ":" + today.getMinutes[] + ":" + today.getSeconds[];
   var dateTime = date+' '+time;

   document.getElementById["hvn"].innerHTML = dateTime;

Kết luận

Qua bài viết này chúng tôi đã hướng dẫn bạn cách lấy ngày giờ hiện tại – current Date Time bằng javascript. Nếu có bất kỳ đóng góp nào bạn có thể để lại bình luận ở bên dưới. Bạn cũng có thể tham khảo thêm các dịch vụ Web Hosting, Cloud VPS, Email Business do chúng tôi cung cấp hoặc xem các bài viết chia sẻ khác của chúng tôi tại đây

Ebook Wordpress

Đăng ký nhận Ebooks toàn tập hướng dẫn sử dụng WordPress cơ bản

Trung tâm cá nhân

Giỏ hàng

Phiếu mua hàng

Đăng nhập ngay

Tin nhắn Danh sách tin nhắn

Tìm kiếm

Lucky star is coming...

Nhấp để nhận phần thưởng đăng nhập hôm nay!

Xin chúc mừng! Bạn đã nhận được {{mission.data.mission.credit}} điểm hôm nay

  • Continuous{{item.count}}ngày

  • VNĐCoupon

    Thời hạn sử dụng: Đã hết hạn và không thể sử dụng

    Thời hạn sử dụng:Vĩnh viễn

    Hạn chế sử dụng các sản phẩm sau: Hạn chế sử dụng các loại sản phẩm sau: Sử dụng không hạn chế:

    Tất cả các sản phẩm và loại sản phẩm có thể được sử dụng

Bạn có một tin nhắn riêng mới

Không có tin nhắn riêng mới

Nhiệm vụ hôm nay đã hoàn thành

Chủ Đề