Hướng dẫn how do you display date and time in html? - làm thế nào để bạn hiển thị ngày và giờ trong html?

Hướng dẫn how do you display date and time in html? - làm thế nào để bạn hiển thị ngày và giờ trong html?

Đối tượng ngày JavaScript và phần tử Span HTML có thể được sử dụng để hiển thị ngày và giờ hiện tại. Theo mặc định, JavaScript sử dụng múi giờ của trình duyệt để hiển thị thời gian và ngày.

Đối tượng ngày JavaScript

Đối tượng ngày được tạo với hàm tạo ngày mới (). Ngày và thời gian hiện tại được lưu trữ bên trong biến JavaScript. is created with the new Date() constructor. The current date and time is stored inside javascript variable.

Sau đó, sử dụng thuộc tính bên trong, nội dung của phần tử Span HTML được đặt với ngày và giờ hiện tại. ID duy nhất của thẻ Span được sử dụng bởi phương thức getEuityById () để hiển thị ngày và giờ hiện tại.HTML span element is set with current date and time. Unique id of span tag is used by getElementById() method to display the current date and time.

Mã HTML

Mã HTML được đưa ra dưới đây.

<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
3

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Current Date and Time is <span id='date-time'></span>.</p>
</body>
</html>
<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
3

Mã JavaScript

Mã JavaScript được đưa ra dưới đây.

<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
3

<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
3

Thử nghiệm

Video

Xem video hướng dẫn về hiển thị ngày và thời gian bằng JavaScript và HTML.

❮ Thẻ HTML

Thí dụ

Phần tử thời gian với thuộc tính DateTime có thể đọc được bằng máy:

Tôi có một ngày vào ngày lễ tình nhân.

Hãy tự mình thử »


Định nghĩa và cách sử dụng

Thuộc tính

<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
7 đại diện cho định dạng có thể đọc được bằng máy của phần tử
<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
8.

Ví dụ về các giá trị DateTime hợp lệ:

Ngày: & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

Ngày và giờ: & nbsp; & nbsp; & nbsp; & nbsp;

Lần: & nbsp; & nbsp; & nbsp;

Thời lượng: & nbsp; & nbsp;


Hỗ trợ trình duyệt

Thuộc tính
ngày giờ62.0 & nbsp;18.0 22.0 7.0 49.0


Cú pháp

Giá trị thuộc tính

Giá trịSự mô tả
YYYY-MM-DDThh:mm:ssTZDor

Ptdhms

Ngày hoặc thời gian được chỉ định. Giải thích về các thành phần:
  • YYYY - Năm (ví dụ: 2011)
  • Mm - tháng (ví dụ: 01 cho tháng một)
  • DD - Ngày của tháng (ví dụ: 08)
  • T hoặc một không gian - một thiết bị phân cách (yêu cầu nếu thời gian cũng được chỉ định)
  • HH - giờ (ví dụ: 22 cho 10 giờ tối)
  • mm - phút (ví dụ: 55)
  • SS - giây (ví dụ: 03)
  • TZD - Nhà thiết kế múi giờ (Z biểu thị Zulu, còn được gọi là thời gian trung bình của Greenwich)
  • P - Một tiền tố cho "Thời gian"
  • D - một tiền tố cho "ngày"
  • H - Một tiền tố cho "giờ"
  • M - một tiền tố cho "phút"
  • S - Một tiền tố cho "giây"

❮ Thẻ HTML


Nhận cuốn sách này -> Vấn đề về Array: Đối với các cuộc phỏng vấn và lập trình cạnh tranh

Trong bài viết này, chúng tôi đã trình bày mã HTML và JavaScript để hiển thị thời gian trực tiếp và ngày trên trang HTML. Đối tượng ngày JavaScript và phần tử Span HTML có thể được sử dụng để hiển thị ngày và giờ hiện tại. Theo mặc định, JavaScript sử dụng múi giờ của trình duyệt để hiển thị thời gian và ngày.

Lưu ý: Thời gian trên tiếp tục thay đổi.

Mục lục:

  1. Đối tượng Ngày JavaScript + HTML, JS CODE
  2. Cập nhật ngày và thời gian trong thời gian thực
  3. Phương pháp để có được ngày và giờ
  4. Bản tóm tắt

Hãy để chúng tôi bắt đầu với Hiển thị thời gian trực tiếp và ngày trên trang HTML.

Đối tượng Ngày JavaScript + HTML, JS CODE

Cập nhật ngày và thời gian trong thời gian thực constructor is used to create date object.Current Date and Time is stored inside javascript variable.

Phương pháp để có được ngày và giờ

Bản tóm tắt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Document</title>
<h2> Time is <span id="time"> </span></h2>
<script src="index.js">   </script>
</head>
<body>
</body>
</html>

Hãy để chúng tôi bắt đầu với Hiển thị thời gian trực tiếp và ngày trên trang HTML.

 `use strict`
var datetime = new Date();
console.log(datetime);
document.getElementById("time").textContent = datetime; //it will print on html page

Trình xây dựng ngày mới () được sử dụng để tạo đối tượng ngày. Ngày và thời gian hiện tại được lưu trữ bên trong biến JavaScript.
Date and Time is Thu Sep 30 2021 10:43:14 GMT+0530 (India Standard Time)

Cập nhật ngày và thời gian trong thời gian thực

Phương pháp để có được ngày và giờ

`use strict`;
function refreshTime() {
  const timeDisplay = document.getElementById("time");
  const dateString = new Date().toLocaleString();
  const formattedString = dateString.replace(", ", " - ");
  timeDisplay.textContent = formattedString;
}
  setInterval(refreshTime, 1000);

Phương pháp để có được ngày và giờ

  • Date.prototype.getDate()::

Bản tóm tắt

Hãy để chúng tôi bắt đầu với Hiển thị thời gian trực tiếp và ngày trên trang HTML.

 `use strict`
var datetime = new Date().getDate();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page
  • Date.prototype.getday()::

    Trình xây dựng ngày mới () được sử dụng để tạo đối tượng ngày. Ngày và thời gian hiện tại được lưu trữ bên trong biến JavaScript.

Sau đó, sử dụng thuộc tính TextContent Nội dung của phần tử Span HTML được đặt với hiện tại và thời gian. ID duy nhất được cung cấp cho thẻ Span để chúng ta có thể sử dụng nó trên phương thức getEuityById () để phân tán ngày và thời gian hiện tại.

`use strict`
var datetime = new Date().getDay();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page
  • Date.prototype.getFullYear()::

    MÃ HTML

Mã JavaScript

 `use strict`
var datetime = new Date().getFullYear();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

  • Ngày và thời gian là THU ngày 30 tháng 9 năm 2021 10:43:14 GMT+0530 (Giờ chuẩn Ấn Độ):
    It will return the hour(0-23) in the specific local time zone.

    Sau đây là mã để cập nhật ngày và giờ trong thời gian thực trong một khoảng thời gian nhất định:

    
    `use strict`
    var datetime = new Date().getHours()+1;
    console.log(datetime); // it will represent date in the console of developers tool
    document.getElementById("time").textContent = datetime; // represent on webbrowser
    
    
  • Nó trả lại vào ngày trong tháng từ 1 - 31 theo múi giờ địa phương:
    It will return the milliseconds between 0-999 in the specified date according to local time zone

Sử dụng getdate ()

 `use strict`
var datetime = new Date().getMilliseconds();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on html page

  • Nó trả lại vào ngày trong tuần (0 Hàng6) cho ngày cụ thể theo múi giờ địa phương.:
    It will return the month between 0- 11 in the specified date according to local time zone. for getting month between 1 - 12 ,You have to add 1.

Sử dụng getday ()

<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
0
  • Nó trả lại năm của ngày được chỉ định theo múi giờ địa phương.:
    It will return the "date" portion of the Date as a human-readable string like Fri Oct 01 2021

Sử dụng getflyear ()

<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
1
  • Date.prototype.gethours (): Nó sẽ trả về giờ (0-23) trong múi giờ địa phương cụ thể.:
    It will return a string with a locality-sensitive representation of the time portion of this date, based on system settings.It will return string like
    12:42:15 AM
<script>
var dt = new Date();
document.getElementById('date-time').innerHTML=dt;
</script>
2

Bản tóm tắt

  • Hãy để chúng tôi bắt đầu với Hiển thị thời gian trực tiếp và ngày trên trang HTML.
  • Trình xây dựng ngày mới () được sử dụng để tạo đối tượng ngày. Ngày và thời gian hiện tại được lưu trữ bên trong biến JavaScript.
  • Sau đó, sử dụng thuộc tính TextContent Nội dung của phần tử Span HTML được đặt với hiện tại và thời gian. ID duy nhất được cung cấp cho thẻ Span để chúng ta có thể sử dụng nó trên phương thức getEuityById () để phân tán ngày và thời gian hiện tại.
  • MÃ HTML
  • Mã JavaScript
  • Ngày và thời gian là THU ngày 30 tháng 9 năm 2021 10:43:14 GMT+0530 (Giờ chuẩn Ấn Độ)

Sau đây là mã để cập nhật ngày và giờ trong thời gian thực trong một khoảng thời gian nhất định:

Làm cách nào để hiển thị trường ngày trong HTML?

Các phần tử của Type = "Date" Tạo các trường đầu vào cho phép người dùng nhập ngày, bằng hộp văn bản xác thực đầu vào hoặc giao diện người chọn ngày đặc biệt.Giá trị kết quả bao gồm năm, tháng và ngày, nhưng không phải là thời gian. elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time.

Làm cách nào để hiển thị ngày và giờ hiện tại trong HTML Textbox?

Bạn cần thêm một tập lệnh gọi getDate () từ js.add a script that calls getDate() from js.

Làm cách nào để hiển thị ngày và giờ hiện tại trên trình duyệt của tôi?

Trong JavaScript, chúng ta có thể dễ dàng nhận được ngày hoặc giờ hiện tại bằng cách sử dụng đối tượng ngày mới ().Theo mặc định, nó sử dụng múi giờ của trình duyệt của chúng tôi và hiển thị ngày dưới dạng chuỗi văn bản đầy đủ, chẳng hạn như "Thứ Sáu 17 tháng 6 năm 2022 10:54:59 GMT+0100 (Thời gian mùa hè của Anh)" có chứa ngày, thời gian và thời gian hiện tạivùng.using the new Date() object. By default, it uses our browser's time zone and displays the date as a full text string, such as "Fri Jun 17 2022 10:54:59 GMT+0100 (British Summer Time)" that contains the current date, time, and time zone.